Change CSS with jQuery if not at the top of the page

Question

I'm using jQuery to change the CSS elements of the Bootstrap navbar after scrolling. The issue I have is that if you load the page anywhere after the top of the page, the menu won't get smaller until you scroll down - with the below code:

var a = $(".nav").offset().top;

$(document).scroll(function(){
    if($(this).scrollTop() > a)
    {   
       $('.navbar-fixed-top').css({"background":"#fff"});
       $('.navbar-fixed-top').css({"transition":"0.5s"});
       $('.navbar-fixed-top li a').css({"padding-top":"20px"});
       $('.navbar-fixed-top li a').css({"padding-bottom":"20px"});
    } else {
       $('.navbar-fixed-top').css({"background":"transparent"});
       $('.navbar-fixed-top').css({"transition":"0.5s"});
       $('.navbar-fixed-top li a').css({"padding-top":"40px"});
       $('.navbar-fixed-top li a').css({"padding-bottom":"40px"});
    }
});

I've been trying to change it so that if it's not at the top of the page, it'll execute the scrollTop code, but with no luck.

It sounds like you may be looking for [a way to check the position on the page in jQuery](http://stackoverflow.com/a/17441121/2341603). — Obsidian Age, Feb 19 '17 at 20:50

motanelu · Answer 1 · 2017-02-19T21:02:51.107

0

Basically, you need to run the adjust function on both scroll and load events. Here's an example:

(function($) {
    var a = $(".nav").offset().top;

    var adjust = function () {
        if($(document).scrollTop() > a) {   
           $('.navbar-fixed-top').css({"background":"#fff"});
           $('.navbar-fixed-top').css({"transition":"0.5s"});
           $('.navbar-fixed-top li a').css({"padding-top":"20px"});
           $('.navbar-fixed-top li a').css({"padding-bottom":"20px"});
        } else {
           $('.navbar-fixed-top').css({"background":"transparent"});
           $('.navbar-fixed-top').css({"transition":"0.5s"});
           $('.navbar-fixed-top li a').css({"padding-top":"40px"});
           $('.navbar-fixed-top li a').css({"padding-bottom":"40px"});
        }
    }

    $(document).scroll(adjust);
    $(function() { adjust; })
})(window.jQuery);

edited Feb 19 '17 at 21:02

answered Feb 19 '17 at 20:51

motanelu

3,945
1
14
21

Look at my solution, your version doesn't deal with `$(this).scrollTop()` – michail_w Feb 19 '17 at 20:52
It's the exact same solution, mine just waits for the `window.load` event to fire and does not pollute the global namespace... – motanelu Feb 19 '17 at 20:55
Try to run your code. Events subscribers have `this` pointer to listened element (in this case it was `document`). As I can see, you call adjust without any pointer to `document`, so `this` inside is pointed to instance of `adjust` function. You should suggest `$(function() { adjust.call(document); })` instead. – michail_w Feb 19 '17 at 20:59
@michail_w Unfortunately, this didn't work. It loads as what it should only be right at the top. Only changes when you scroll down - but when you go up, past the point where you loaded it returns to the previous menu – E.D.A Feb 20 '17 at 18:30

score 0 · Accepted Answer · answered Feb 19 '17 at 20:51

0

Your function is run only as event listener, so you have to run it manually first. Try this code:

var a = $(".nav").offset().top;

function scrollListener(){
    if($(document).scrollTop() > a)
    {   
       $('.navbar-fixed-top').css({"background":"#fff"});
       $('.navbar-fixed-top').css({"transition":"0.5s"});
       $('.navbar-fixed-top li a').css({"padding-top":"20px"});
       $('.navbar-fixed-top li a').css({"padding-bottom":"20px"});
    } else {
       $('.navbar-fixed-top').css({"background":"transparent"});
       $('.navbar-fixed-top').css({"transition":"0.5s"});
       $('.navbar-fixed-top li a').css({"padding-top":"40px"});
       $('.navbar-fixed-top li a').css({"padding-bottom":"40px"});
    }
};

$(document).scroll(scrollListener);

scrollListener();

answered Feb 19 '17 at 20:51

michail_w

4,318
4
26
43

Unfortunately, this didn't work. It loads as what it should only be right at the top. Only changes when you scroll down - but when you go up, past the point where you loaded it returns to the previous menu. – E.D.A Feb 19 '17 at 21:39
Perhaps, would it be better for the menu to always be smaller, and only get bigger if it's touching the top? – E.D.A Feb 19 '17 at 21:41
Could you provide online demo? – michail_w Feb 20 '17 at 18:32

Change CSS with jQuery if not at the top of the page

2 Answers2