[英]Leave menu bar fixed on top when scrolled
I've seen some websites that when the user scrolls down the page a box would pop-up to the right or left...我见过一些网站,当用户向下滚动页面时,会在右侧或左侧弹出一个框...
Also, noticed this template: http://www.mvpthemes.com/maxmag/ the designer does a nice job leaving the nav bar fixed on top.此外,注意到这个模板: http : //www.mvpthemes.com/maxmag/设计师做得很好,将导航栏固定在顶部。
Now, how are these done?现在,这些是如何完成的? I guess it uses jquery to get the position of the page and to show the box.
我猜它使用 jquery 来获取页面的位置并显示框。
Can you please guide me to where I can find a snippet so I can learn to do something like that.请您指导我到哪里可以找到一个片段,以便我可以学习做类似的事情。
This effect is typically achieved by having some jquery logic as follows: 通常,通过具有以下jquery逻辑可以达到此效果:
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 50) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
This says once the window has scrolled past a certain number of vertical pixels, it adds a class to the menu that changes it's position value to "fixed". 这表示一旦窗口滚动超过一定数量的垂直像素,就会在菜单中添加一个类,以将其位置值更改为“固定”。
For complete implementation details see: http://jsfiddle.net/adamb/F4BmP/ 有关完整的实施细节,请参见: http : //jsfiddle.net/adamb/F4BmP/
In this example, you may show your menu centered. 在此示例中,您可能将菜单居中显示。
<div id="main-menu-container">
<div id="main-menu">
//your menu
</div>
</div>
.f-nav{ /* To fix main menu container */
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
#main-menu-container {
text-align: center; /* Assuming your main layout is centered */
}
#main-menu {
display: inline-block;
width: 1024px; /* Your menu's width */
}
$("document").ready(function($){
var nav = $('#main-menu-container');
$(window).scroll(function () {
if ($(this).scrollTop() > 125) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
same as adamb but I would add a dynamic variable num 与adamb相同,但我会添加一个动态变量num
num = $('.menuFlotante').offset().top;
to get the exact offset or position inside the window to avoid finding the right position. 以获取窗口内的确切偏移量或位置,以避免找到正确的位置。
$(window).bind('scroll', function() {
if ($(window).scrollTop() > num) {
$('.menu').addClass('fixed');
}
else {
num = $('.menuFlotante').offset().top;
$('.menu').removeClass('fixed');
}
});
You can also use css rules: 您还可以使用CSS规则:
position: fixed ;
and top: 0px ;
和
top: 0px ;
on your menu tag. 在您的菜单标签上。
Or do this in more dynamic way 或者以更动态的方式进行
$(window).bind('scroll', function () {
var menu = $('.menu');
if ($(window).scrollTop() > menu.offset().top) {
menu.addClass('fixed');
} else {
menu.removeClass('fixed');
}
});
In CSS add class 在CSS中添加类
.fixed {
position: fixed;
top: 0;
}
check the link below, it has the html, css, JS and a live demo :) enjoy 检查下面的链接,它具有html,css,JS和一个在线演示:)享受
http://codepen.io/senff/pen/ayGvD http://codepen.io/senff/pen/ayGvD
// Create a clone of the menu, right next to original. $('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide(); scrollIntervalID = setInterval(stickIt, 10); function stickIt() { var orgElementPos = $('.original').offset(); orgElementTop = orgElementPos.top; if ($(window).scrollTop() >= (orgElementTop)) { // scrolled past the original position; now only show the cloned, sticky element. // Cloned element should always have same left position and width as original element. orgElement = $('.original'); coordsOrgElement = orgElement.offset(); leftOrgElement = coordsOrgElement.left; widthOrgElement = orgElement.css('width'); $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement+'px').show(); $('.original').css('visibility','hidden'); } else { // not scrolled past the menu; only show the original menu. $('.cloned').hide(); $('.original').css('visibility','visible'); } }
* {font-family:arial; margin:0; padding:0;} .logo {font-size:40px; font-weight:bold;color:#00a; font-style:italic;} .intro {color:#777; font-style:italic; margin:10px 0;} .menu {background:#00a; color:#fff; height:40px; line-height:40px;letter-spacing:1px; width:100%;} .content {margin-top:10px;} .menu-padding {padding-top:40px;} .content {padding:10px;} .content p {margin-bottom:20px;}
<div class="intro">Some tagline goes here</div>
you may want to add: 您可能要添加:
$(window).trigger('scroll')
to trigger the scroll event when you reload an already scrolled page. 在重新加载已经滚动的页面时触发滚动事件。 Otherwise you might get your menu out of position.
否则,您的菜单可能会错位。
$(document).ready(function(){
$(window).trigger('scroll');
$(window).bind('scroll', function () {
var pixels = 600; //number of pixels before modifying styles
if ($(window).scrollTop() > pixels) {
$('header').addClass('fixed');
} else {
$('header').removeClass('fixed');
}
});
});
This is jquery code which is used to fixed the div when it touch a top of browser hope it will help a lot. 这是jquery代码,用于在div接触浏览器顶部时修复div,希望对您有所帮助。
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
$.fn.scrollBottom = function() {
return $(document).height() - this.scrollTop() - this.height();
};
var $el = $('#sidebar>div');
var $window = $(window);
var top = $el.parent().position().top;
$window.bind("scroll resize", function() {
var gap = $window.height() - $el.height() - 10;
var visibleFoot = 172 - $window.scrollBottom();
var scrollTop = $window.scrollTop()
if (scrollTop < top + 10) {
$el.css({
top: (top - scrollTop) + "px",
bottom: "auto"
});
} else if (visibleFoot > gap) {
$el.css({
top: "auto",
bottom: visibleFoot + "px"
});
} else {
$el.css({
top: 0,
bottom: "auto"
});
}
}).scroll();
});
});//]]>
</script>
try with sticky jquery plugin 尝试使用粘性jQuery插件
https://github.com/garand/sticky https://github.com/garand/sticky
<script src="jquery.js"></script> <script src="jquery.sticky.js"></script> <script> $(document).ready(function(){ $("#sticker").sticky({topSpacing:0}); }); </script>
$(window).scroll(function () {
var ControlDivTop = $('#cs_controlDivFix');
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
ControlDivTop.stop().animate({ 'top': ($(this).scrollTop() - 62) + "px" }, 600);
} else {
ControlDivTop.stop().animate({ 'top': ($(this).scrollTop()) + "px" },600);
}
});
});
You can try this with your nav div
: 您可以使用nav
div
尝试以下操作:
postion: fixed;
top: 0;
width: 100%;
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Using JavaScript you could trigger this effect using intersection observers when certain elements enter or leave the viewport.使用 JavaScript,您可以在某些元素进入或离开视口时使用交叉点观察器触发此效果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.