Question

我是新来的，当我的粘性导航栏滚动到某个部分时，我正在使用jQuery脚本来解决我的CSS问题。

首先，我使用了一个名为“.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

获取height的{{1}}并将其添加到div。

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"); } }); }上使用margin并希望将其应用，请使用.outerHeight(true)。

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

1 个答案: