Question

我试图为我的底部导航创建标准粘性功能。它实际上只是一个低功能的工具，使其成为一个绝对定位的元素，从窗口顶部到页面底部大约300像素。它应该很容易。我在下面编写了以下代码

CSS

.style2info { 
    margin-top:170px;
    height: 3800px;
    background-color: #6B6B6B;
    margin-left: 59px;
    width: 70px;
    position: relative;
}
.anchornav {
    height: 30px;
    width: 25px;
    position: absolute;
}
.anchornav.sticky {
    position: fixed;
    top: 0px;
}

的Javascript

$(document).ready(function () {
var win      = $(window),
    fxel     = $('.anchornav'),
    eloffset = fxel.offset().top;

win.scroll(function() {
    if (win.scrollTop() > eloffset) {
        fxel.addClass("sticky");
    } else {
         fxel.removeClass("sticky");
     }
});

HTML

<div class="style2info"><!-- sticky -->
    <div class="anchornav">
        <p>sticky?</p></div>
</div>

在我的Fiddle上，它完美地工作。问题出在实际的网站上，而不是。 http://webstage.emich.edu/dining-new/locations.php （忽略内联样式，只要我还在使用javascript工作就可以了）

我唯一能想到的是它在页面上的位置，较大的div（＆＃34; style2info＆＃34;）有一个负边距，可以正确定位。这可能会搞砸我的代码吗？还是别的什么？

任何帮助总是受到赞赏！谢谢!!!!

******我已经阅读了有关粘性对象的其他stackoverflow。问题是他们要么从github采取，要么尝试做其他事情。我只是非常直接和简单，我想知道我做错了什么，而不是使用其他程序来做** **

Answer 1

因此经过一些仔细的检查并试图弄清楚到底出了什么问题，我发现发球的效果远远低于JSfiddle。我将javascript重新格式化为以下

function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('.style2info').offset().top;
  if (window_top > div_top)
    $('.anchornav').addClass('sticky')
  else
    $('.anchornav').removeClass('sticky');
  }
 $(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
  });

现在完美运作！

粘性功能的Javascript无法正常工作

1 个答案: