的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功能黏不工作

回答

相關問題