的JavaScript功能黏不工作

-2

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

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（“ style2info“）有一个负边距来正确定位它。这可能会弄乱我的代码吗？或者是别的什么？

任何帮助总是感激！谢谢！！！！

******我已经阅读了有关粘物体其他stackoverflows。问题是他们要么从github上拿走，要么试图做其他事情。雷只是很直接和简单，我想了解我在做什么错，而不是使用其它程序做**

来源

2015-03-31 petiteco24601

从检查控制台开始，应该有所帮助。 – sinisake 2015-03-31 19:16:08

in location.php你有一个html实体'>'而不是使用'>'符号。取而代之的是为google分析代码创建一个seroate文件。将代码放在身体标记的末尾。 – dowomenfart 2015-03-31 19:23:17

你必须修复页面上的任何javascript错误 - 我看到大约3或4个错误 - 他们可能会阻止脚本执行。 – 2015-03-31 19:26:33

所以经过一番仔细的检查，并试图找出什么是错的，我发现该服务比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(); 
    });

现在完美地工作！

来源

2015-04-02 18:08:04 petiteco24601

的JavaScript功能黏不工作

回答

相关问题