Q
动画导航栏
1
A
回答
0
假设你希望用户滚动超过90像素
JAVA脚本代码
//ONSCROLL FUNCTION TO HIDE MENU
function hideMenu(){
var mouseX = window.scrollY;
var menu = document.getElementById("pageHeader");
if(mouseX > 90){
menu.style.height = "50px";
menu.style.transition = "height 1s"; /*This is Optional */
}else {
menu.style.height = "100PX";
menu.style.transition = "height 1s";
}
}
window.addEventListener("scroll",hideMenu);
CSS代码后更改菜单高度。这是简单的JUST FOR了解
<style>
#pageHeader {
height: 100px;
}
</style>
HTML代码
<div id="pageHeader">
<!-- HERE IS YOUR MENU ITEMS OR THEIR CONTAINER... -->
</div>
在这段代码此功能hideMenu()总是开始时用户向下滚动页面。当他们向下滚动超过90px时,菜单的高度为50px。您可以通过使用if else条件来添加更多效果...... 希望这会对您有所帮助。如果你有进一步的问题评论他们..
+0
明白了,解释得很好。非常感谢 –
0
你可以激发一个jquery函数,并启用一个类,通过CSS放置position:fixed
。 Live Example
HTML
<div id="nav-bar"></div>
<div id="some-content"></div>
<div id="anchor-point"></div>
<div id="sticky"></div>
<div id="some-content2"></div>
CSS
#nav-bar{
margin-top: 0;
background-color: #000;
height:60px;
position: fixed;
top: 0;
z-index: 1;
width:100%
}
#some-content{
height: 500px;
}
#sticky{
width:100%;
height:50px;
background-color:#ccc;
}
#sticky.stick {
margin-top: 60px !important;
position: fixed;
top: 0;
z-index: 2000;
}
#some-content2{
height: 500px;
}
的JQuery/JS
function stick_sticky() {
var window_top = $(window).scrollTop();
var div_top = $('#anchor-point').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
$('#anchor-point').height($('#sticky').outerHeight());
} else {
$('#sticky').removeClass('stick');
$('#sticky-anchor').height(0);
}
}
$(function() {
$(window).scroll(stick_sticky);
stick_sticky();
});
相关问题
- 1. 导航栏动画
- 2. Team Treehouse导航栏动画
- 3. CSS导航栏动画
- 4. 动画导航控制器转换没有动画导航栏
- 5. 工具栏和导航栏坏动画
- 6. 动画导航栏不起作用
- 7. 如何制作动画sidein导航栏?
- 8. 导航栏动画变成白色
- 9. 增量缩小动画导航栏
- 10. 禁用导航栏的动画
- 11. 抽屉导航栏的DrawerArrowToggle动画。
- 12. swift导航栏标题删除动画
- 13. 导航栏的动画图像
- 14. 阻止UINavigationController的导航栏动画?
- 15. 导航栏中的动画标题
- 16. 固定的导航栏与动画
- 17. 导航栏按钮动画错误
- 18. iOS导航栏加载动画背景
- 19. UITableView导航栏“闪烁”动画
- 20. 使用动画后导航栏不能上下滚动,导航栏消失
- 21. iPhone:无法动画的contentInset动画导航栏显示/隐藏
- 22. jQuery的动画导航栏,不能动画
- 23. Android动作栏/导航栏
- 24. 动作栏导航
- 25. 导航栏滚动
- 26. 动画UITabBarController导航
- 27. 导航栏向上移动,同时导航控制器的弹出动画
- 28. 有没有一种方法来激活动画NG2,引导移动导航栏(导航栏,切换)
- 29. 引导汉堡图标动画导航栏头
- 30. 滑动动画导航angularjs
采用javascript这样的** VAR mouseX = window.scrollY; **在mouseX当您滚动下降这将增加像素 – Sunny
你可能偶然进入更多的细节呢?我有点困惑 –
好吧,我会解释 – Sunny