我有一个Navaigation栏，只有当用户将页面滚动到大约100px时，我才想要将其固定在顶部。仅在滚动时显示元素

这是实现此目标的最佳方法吗？

http://play.mink7.com/sophiance/

2013-06-01 Harsha M V

最好的方法是搜索粘性导航栏 –

@roasted我创建了粘条。但希望它只在滚动后出现 –

$(document).scroll(function() { 
     var y = $(this).scrollTop(); 
     if (y > 100) { 

      //when page scrolls past 100px 

     } else { 

      //when page within 100px 

     } 
    });

希望这有助于

来源

2013-06-01 13:24:17 shammelburg

这将坚持导航顶部窗口的顶部到达它有助于top.Hope的时刻。

var $window = $(window), 
      $navigation = $('#navigation'), 
      elTop = $navigation.offset().top; 

     $window.scroll(function() { 
      $navigation.toggleClass('fixed', $window.scrollTop() > elTop); 
     });

来源

2013-06-01 13:19:54

我应该在哪里设置100px？ –

你只需把你的导航放在你想要的位置，它可以在任何距离从顶部，在这种情况下，100，然后把上面的代码放在你的脚本，它会自动坚持到顶部时，它到达那里。 –

使用jQuery添加滚动处理程序。
$("html, body").scroll(yourHandler() {});
然后，只需通过
$("html, body").scrollTop();
检查滚动位置确定是否是只要你想它去，然后添加一个CSS-Class，以它增加了固定属性，例如导航栏滚动或如果你愿意的话，更复杂一些。

不要忘记删除类或任何其他更改，如果再次滚动回来。

来源

2013-06-01 13:22:25 luk2302

工作DEMO这里... http://jsfiddle.net/eFCK3/1/

HTML

<div id="header-small">Header</div> 
<div> 
    <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p> 
</div>

CSS

#header-small{ 
    display:none;background:red;padding:2%;position:fixed;top:0px;width:960%;  
}

$ JQUERY

$(window).scroll(function() { 
    if ($(this).scrollTop()>100) { 
     $('#header-small').fadeIn(); 
    } else { 
     $('#header-small').fadeOut(); 
    } 
});

来源

2013-06-01 13:25:09 yeyene

仅在滚动时显示元素

回答

HTML

CSS

相关问题