javascript - 我可以重置 jQuery 粘性导航栏功能吗？

Question

我是新来的，当我的粘性导航栏滚动到某个部分时，我用来更改 CSS 的 jQuery 脚本遇到了一个小问题。

首先，我使用了一个名为“.stickychange”的类，它是 jQuery 函数的触发器。在这一部分，我使用了背景图像(我个人拍摄的一张照片)，并且我希望我的白色导航栏在超过该部分时变成透明的黑色。它就像一个魅力。但是在这个部分之后，我有一个白色的部分，我希望我的导航栏采用它的默认样式，但它没有。 如果我滚动回到顶部，它会采用默认设置，但如果我滚动经过 .stickychange，它会保留调整后的 CSS 样式。

您知道如何重置函数，或者至少在达到特定点时停止函数吗？

这是代码，如果你想在滚动时改变元素的样式，这是一个基本代码:

 var scroll_start = 0;
 var startchange = $(".stickychange");
 var offset = startchange.offset();

 if (startchange) {
     $(document).scroll(function () {
         scroll_start = $(this).scrollTop();
         if (scroll_start > offset.top) {
             $("#menu_top").css('background-color', 'rgba(0,0,0,0.5)');
             $("#menu_top").css('transition', 'all 0.2s ease-in');
             $("#menu_top a").addClass("stickyspecial");
            $("#menu_top h2").addClass("stickyname");
         } else {
             $('#menu_top').css('background-color', '#fff');
             $('#menu_top a').removeClass("stickyspecial");
             $('#menu_top h2').removeClass("stickyname");
         }
     });
 }

提前谢谢大家! :)

Answer 1

获取 div 的 height 并将其添加到您的 if。

 var scroll_start = 0;
 var startchange = $(".stickychange");
 var offset = startchange.offset();

 // Get the height with padding and border
 // You could use .height() if you just want the height of the div.
 var endchange = startchange.outerHeight(); 

 if (startchange) {
     $(document).scroll(function () {
         scroll_start = $(this).scrollTop();
         if (scroll_start > offset.top && scroll_start < offset.top + endchange) { //<- Add it here  
             $("#menu_top").css('background-color', 'rgba(0,0,0,0.5)');
             $("#menu_top").css('transition', 'all 0.2s ease-in');
             $("#menu_top a").addClass("stickyspecial");
            $("#menu_top h2").addClass("stickyname");
         } else {
             $('#menu_top').css('background-color', '#fff');
             $('#menu_top a').removeClass("stickyspecial");
             $('#menu_top h2').removeClass("stickyname");
         }
     });
 }

如果您在 div 上使用 margin 并希望应用它，请使用 .outerHeight(true) .