粘性導航欄工作在jsfiddle上，但不如本地主機上的預期

我把放在10px之後出現在相對位置上的sticky navbar放在一起，然後一旦它滾過offset().top就變得固定了。這在小提琴上按照需要工作，但是在本地主機上（使用完全相同的代碼），導航欄一出現就被固定（它應該相對定位到偏移點，如小提琴中所示）。粘性導航欄工作在jsfiddle上，但不如本地主機上的預期

想知道爲什麼它在本地主機上表現不同嗎？

此外，我已經添加jquery（<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>）和沒有控制檯錯誤。

這裏是因爲我從本地主機上運行它的JavaScript：

<script type="text/javascript"> 
    document.getElementById('navig').style.visibility = 'hidden'; 
    var fixed = false; 
    var topTrigger = $('#navig').offset().top; 

    $(window).scroll(function() { 
    if ($(this).scrollTop() > 10) { 
     document.getElementById('arr_downpoint').style.visibility = 'hidden'; 
     document.getElementById('navig').style.visibility = 'visible'; 
    } 
    else { 
     document.getElementById('arr_downpoint').style.visibility = 'visible'; 
     document.getElementById('navig').style.visibility = 'hidden'; 
    }  

    }); 
    $(document).scroll(function() { 
    if($(this).scrollTop() >= topTrigger) { 
     if(!fixed) { 
     fixed = true; 
     $('#navig').css({'position':'fixed', 'top':'0'}); 
     } 
    } else { 
     if(fixed) { 
     fixed = false; 
     $('#navig').css({'position':'relative'}); 
     } 
    } 
    }); 
</script>

來源

2016-01-30 Agni Scribe

你是什麼意思是不工作？你有沒有檢查你的控制檯的錯誤？ –

在jsFiddle中，js代碼被封裝在窗口onload處理程序中。在其中設置你的代碼片段。這就是說，即使在jsFiddle中，代碼實際上也是越野車... –

你對css中的HTML元素nav有絕對的位置，這可能是衝突，而是將其放在類.navclass或id上。 –

嘗試包裹一切你<script>標籤內到$(document).ready()功能：

$(function() { 
    document.getElementById('navig').style.visibility = 'hidden'; 
    var fixed = false; 
    var topTrigger = $('#navig').offset().top; 

    $(window).scroll(function() { 
    if ($(this).scrollTop() > 10) { 
     document.getElementById('arr_downpoint').style.visibility = 'hidden'; 
     document.getElementById('navig').style.visibility = 'visible'; 
    } 
    else { 
     document.getElementById('arr_downpoint').style.visibility = 'visible'; 
     document.getElementById('navig').style.visibility = 'hidden'; 
    } 

    }); 
    $(document).scroll(function() { 
    if($(this).scrollTop() >= topTrigger) { 
     if(!fixed) { 
     fixed = true; 
     $('#navig').css({'position':'fixed', 'top':'0'}); 
     } 
    } else { 
     if(fixed) { 
     fixed = false; 
     $('#navig').css({'position':'relative'}); 
     } 
    } 
    }); 
});

來源

2016-01-30 09:14:16

腳本的任何部分都不起作用，它只是顯示爲一個靜態頁面，與本地主機相同https://jsfiddle.net/qz7531bu/69/ –

@AgniScribe請檢查此內容：** https：//jsfiddle.net/ amgv54L1/** –

@AgniScribe它工作的人嗎？ –

粘性導航欄工作在jsfiddle上，但不如本地主機上的預期

回答

相關問題