如果不在页面顶部，则使用jQuery更改CSS

我使用jQuery在滚动后更改引导导航栏的CSS元素。我遇到的问题是，如果您在页面顶部之后的任何位置加载页面，菜单将不会变小，直到您向下滚动-使用以下代码：

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"});
    }
});   

---

我一直在尝试更改它，以便如果它不在页面顶部，它将执行scrollTop代码，但没有运气。

基本上，您需要在

scroll

和

load

事件上运行调整功能。 下面是一个例子：

(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);

---

您的函数仅作为事件侦听器运行，因此您必须首先手动运行它。请尝试以下代码：

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();

---

听起来你可能在寻找。看看我的解决方案，你的版本没有处理

$（这个）。scrollTop（）

这是完全相同的解决方案，我的解决方案只是等待

窗口。load

事件启动，并且不会污染全局命名空间…尝试运行你的代码。事件订阅者将

此

指针指向侦听的元素（在本例中，它是

文档

）。正如我所看到的，您调用adjust时没有指向

文档的任何指针，因此
内部的
指向
adjust
函数的实例。您应该建议改为
$（function（）{adjust.call（document）；}）
。@michail\w不幸的是，这不起作用。它加载的内容应该只在顶部。只有当你向下滚动时才会改变，但当你向上滚动时，超过你加载的点，它会返回到上一个菜单。很幸运，这不起作用。它加载的内容应该只在顶部。只有当你向下滚动时才会改变，但当你向上滚动时，超过你加载的点，它会返回到上一个菜单。也许，菜单总是更小，只有当它触顶时才变大会更好吗？你能提供在线演示吗？