繁体   English   中英

更改引导导航元素在滚动上的位置(相对于页面顶部)

[英]Change bootstrap nav element position on scroll (relative to page top)

我在使用margin-top属性更改元素位置时遇到问题。元素在引导导航端内部,问题是它正确更改了滚动的边距,但是当我将页面滚动回到顶部时,它不会更改margin-top回到雇用价值。这是我的代码:JS

 $(".flags").css("margin-top", "24px"); $(window).scroll(function(){ var scrollingDiv = $(".flags").offset().top - $(window).scrollTop(); var menuMmainScroll = $(".navbar-nav>li>a").offset().top - $(window).scrollTop(); if(menuMmainScroll === 68) { $(".flags").css("margin-top", "24px"); } else /**if(menuMmainScroll < 10)**/ { $(".flags").css("margin-top", "10px"); } console.log(menuMmainScroll); }); 
  <div class="menu_main"> <div class="navbar yamm navbar-default"> <div class="navbar-header"> <div class="navbar-toggle .navbar-collapse .pull-right " data-toggle="collapse" data-target="#navbar-collapse-1" > <span>Menu</span> <button type="button" > <i class="fa fa-bars"></i></button> </div> </div> <div id="navbar-collapse-1" class="navbar-collapse collapse pull-right"> <nav> <ul class="nav navbar-nav"> <li class="dropdown"><a href="index_new_fullmenu.html" class="dropdown-toggle active">Home</a> <ul class="dropdown-menu" role="menu"> <li><a href="index_new_fullmenu.html">Forside</a></li> <li class="active"><a href="nytilyoga.html">Ny til Yoga</a></li> <li><a href="#holdplan" data-scroll>Holdplan</a></li> <li><a href="#priser" data-scroll>Priser</a></li> <li><a href="#kontakt" data-scroll>Kontakt</a></li> <li><a href="http://yogagear.dk/">Butik</a></li> <li><a href="http://memberservice.sport-solutions.dk/">Medlem log ind</a></li> </ul> </li> <li><a href="#holdplan" class="dropdown-toggle">Holdplan</a></li> <li><a href="#priser" class="dropdown-toggle">Priser</a></li> <li><a href="nytilyoga.html" class="dropdown-toggle">Ny til yoga</a></li> <li class="dropdown"><a href="omyoga.html" class="dropdown-toggle">Om Yoga</a> <ul class="dropdown-menu" role="menu"> <li><a href="mysore.html">Mysore metode</a></li> <li><a href="omastanga">Om Astanga yoga</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Services</a></li> <li><a href="#">Services</a></li> </ul> </li> <li><a href="mysore.html" class="dropdown-toggle">Mysore</a> </li> <li><a href="studiet.html" class="dropdown-toggle">Studiet</a></li> <li><a href="studiet.html" class="dropdown-toggle">Butik</a></li> <li><div class="dropdown-toggle flags"> !!!!!!!!!!!!!!!!!!!!!! <a href="#" class="flag-link"><img src="UK_flag.png" alt="English"> </a> <a href="#" class="flag-link"><img src="DK_flag.png" alt="Danish"> </a> </div> !!!!!!!!!!!!!!!!!!</li> </ul> </nav> </div> </div> 

我把! 在HTML的麻烦部分的开头和结尾处,基本上,在开始时,此菜单的顶部还有另一个菜单(该页面未滚动,但如果滚动开始,则此菜单将占据顶部位置,并保持固定在顶部。)我正在对两个链接内的图像使用div with,这些链接未正确内联显示,但在其自己的字段中内联显示比其他像素高24像素,希望这很有意思,感谢您的帮助。

尝试将滚动功能中的代码编辑到以下内容:

var menuMmainScroll = $(window).scrollTop();

if(menuMmainScroll === 0) {
    $(".flags").css("margin-top", "24px");
}
else {
    $(".flags").css("margin-top", "10px");
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM