移動導航在底部停留在窗口調整大小

我想使自己成爲一個小網站，我幾乎是全新的這個世界（在學校做了一些東西，知道如何製作一個基本頁面，但沒有什麼特別的）。我想問你如何在窗口大小的底部製作一個可移動的導航。移動導航在底部停留在窗口調整大小

我已經自己試過了，但由於我使用bootstrap和materializecss，我認爲我在css中寫了一些無用的行，並且無法真正顯示我迄今爲止所做的操作。我嘗試了一些絕對定位的東西，但是當人們關閉Chrome瀏覽器書籤欄時，它就被搞砸了，於是我轉回了親戚關係。

長話短說，我真的希望有這樣的網站上導航欄：http://www.reverse-magazine.com/

來源

2016-06-27 Alex Acoustic

導航欄是頂部的導航欄，你是不是指腳註？ – Ctc

不要急於向我們展示你的嘗試 - 我們都以這種方式更快地學習。 –

@Ctc nope看看鏈接的網站..導航是在第一個底部，但如果你向下滾動它移動並停留在頂部...我做了同樣的事情，但是當我調整窗口大小時，酒吧也是遠遠低於我使用相對positioining –

這應該讓你去：

https://jsfiddle.net/f26eudd7/2/

$(document).ready(function() { 
 
    var navbar_el = $('.navbar'); 
 
    var navbar_top = navbar_el.offset().top; 
 
    
 
    $(window).scroll(function() { 
 
    if ($(window).scrollTop() > navbar_top) { 
 
     navbar_el.addClass('sticky'); 
 
    } else { 
 
     navbar_el.removeClass('sticky'); 
 
    } 
 
    }); 
 
    
 
    $(window).resize(function() { 
 
    navbar_top = navbar_el.offset().top; 
 
    }); 
 
});

html,body { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.full-height { 
 
    height: 100% 
 
} 
 

 
header { 
 
    position: relative; 
 
    display: block; 
 
    background-image: url('http://placehold.it/1920x1080'); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 

 
.navbar { 
 
    background: #ffffff; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 65px; 
 
} 
 

 
.navbar.sticky { 
 
    position: fixed; 
 
    top: 0; 
 
    z-index: 100; 
 
} 
 

 
#content { 
 
    background: #ff0000; 
 
    height: 1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header class="full-height"> 
 
    <nav class="navbar"> 
 
    Your navbar 
 
    </nav> 
 
</header> 
 

 
<div id="content"> 
 
    Your content 
 
</div>

來源

2016-06-27 15:21:50 Quack

好的答案，以OP應該能夠理解的方式完成 – Ctc

omg非常感謝你，這正是我想要的。可悲的是我對java腳本一無所知，所以你幫了我很多。 –

還有一件事：當navbar「堅持」到頂部時，「你的內容」 - 文字就在它後面。是否有可能告訴網站它應該在導航下？我可能需要它作爲hashlinks，因爲它總是滾動得太遠。我嘗試過填充和邊距，但似乎沒有任何工作（重新發布..我想我需要鏈接你的名字即時新的這方面sry :)） –

移動導航在底部停留在窗口調整大小

回答

相關問題