Scroll background color troubleshooting

Question

I'm trying to redesign my hamburger navigation like custom scrolls. I feel like I'm coming in half https://jsfiddle.net/g95kk7yh/6/

$(document).ready(function(){ var scroll_pos = 0; $(document).scroll(function() { scroll_pos = $(this).scrollTop(); if(scroll_pos > 10) { $(".navigation").css('background', 'rgba(255, 0, 0, 0.5)'); $(".navigation span").css('background', '#bdccd4'); } else { $(".navigation").css('background', 'transparent'); $(".navigation span").css('background', '#fff'); } }); }); 

This is what i am trying to achieve

The main problem I encountered is to assign the correct width and height of the red window without changing the position of the navigation menu as a whole.

It is also possible to have only these changes with a resolution of 600 pixels or lower (as you can see, this shows the hamburger menu).

Answer 1

I used the @potatopeelings post and changed a few lines and added.

 .myClass { margin-right: -25px; width: 85px; height: 85px; background-color: rgba(255, 0, 0, 0.5); } 

Fiddle: https://jsfiddle.net/moj7z2b4/2/

Answer 2

This only applies to the second part of the question (thanks @webeno and @MarcusPorter for catching me). Refer to the 7urkm3n solution for an answer that covers both parts of the question.

---

Instead of changing the CSS properties in your script, just add / remove a class that has the necessary properties.

 ... if(scroll_pos > 10) { $(".navigation").addClass('myClass') } else { $(".navigation").removeClass('myClass') } ... 

Then collapse the CSS class rules with

 @media screen and (max-width: 600px) { .myClass { ... } .myClass span { ... } } 

so that these rules apply only to screen sizes <600px

---

Fiddle - https://jsfiddle.net/moj7z2b4/

Answer 3

I ran into this problem exactly when I created a “preloader” for my site. Anyway, the way I solved my problem was to change the background-color to backgroundColor . Make sure backgroundColor not in quotation marks, just enter it the way you would do with a variable or function, etc.

From jQuery API Docs :

In addition, jQuery can interpret CSS and DOM formatting the properties of multiple words in the same way. For example, jQuery understands and returns the correct value for .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) and .css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }) . Note that in DOM notation, quotation marks around property names are optional, but with a CSS notation, they are required due to a hyphen in the name.

This code should work, but I have not tested it. I changed your .css('property', 'value') to .css({'property': 'value' });

 $(document).ready(function() { var scroll_pos = 0; $(document).scroll(function() { scroll_pos = $(this).scrollTop(); if (scroll_pos > 10) { $(".navigation").css({ backgroundColor: 'rgba(255, 0, 0, 0.5)' }); $(".navigation span").css({ 'background': '#bdccd4' }); } else { $(".navigation").css({ backgroundColor: 'transparent' }); $(".navigation span").css({ 'background': '#fff' }); } }); });