移动导航在底部停留在窗口调整大小

我想使自己成为一个小网站，我几乎是全新的这个世界（在学校做了一些东西，知道如何制作一个基本页面，但没有什么特别的）。我想问你如何在窗口大小的底部制作一个可移动的导航。移动导航在底部停留在窗口调整大小

我已经自己试过了，但由于我使用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 :)） –

移动导航在底部停留在窗口调整大小

回答

相关问题