固定菜单，在滚动过一个div后固定 [英] fixed menu that is fixed after scrolling past a div

问题描述

我正在为响应式网站创建固定位置子导航菜单栏。所有的例子，我可以找到一个固定的菜单，滚动到顶部后，基于从顶部设置的像素数。

I am creating a fixed position sub-nav menu bar for a responsive site. All the examples I can find of a fixed menu that sticks to top after scrolling are based on a set number of pixels from top.

然而，由于我在一个响应式网站上工作，我需要菜单的顶部像素是不同的基于视口（在小屏幕上，菜单应该出现

However, since I am working a responsive site the pixels from top where I need the menu to come in are different based on viewport (on small screens, the menu should appear after more area scrolled down because the content fills are taller area of screen).

我有一个工作示例，并使用下面的jquery脚本：

I have a working example and am using the following jquery script:

$(document).ready(function(){
$('#navigation a, #fixedbar a').on('click', function(e) {
e.preventDefault();
});

$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();

if(scrolltop >= 215) {
  $('#fixedbar').fadeIn(250);
}

else if(scrolltop <= 210) {
  $('#fixedbar').fadeOut(250);
}
});
});

正如你可以看到，如果从顶部滚动超过215个像素，固定条会消失。相反，我想让它出现后滚动过某个div。这样我知道它会在用户完全滚动过介绍文字后进入。

As you can see the fixed bar fades in if more than 215 pixels scrolled from the top. Instead I'd like to have it appear after scrolling past a certain div. That way I know it will come in after user has fully scrolled past the intro text.

这是我的小提琴

有什么好的例子，我想做什么？或者容易修改jquery脚本的方法？提前感谢。

Any good examples out there of what I want to do? Or easy way to modify the jquery script? Thanks in advance.

推荐答案

此修改会使其在通过静态导航栏后淡入。

This modification will make it fade in after it passes the static nav

var $nav = $("#navigation");
if(scrolltop >= $nav.offset().top + $nav.height()) {
  $('#fixedbar').fadeIn(250);
}
else {
  $('#fixedbar').fadeOut(250);
}

这篇关于固定菜单，在滚动过一个div后固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！