Question

我有一个问题，使用margin-top属性更改元素的位置。元素在引导程序导航结束时问题是它正确地滚动更改边距，但是我滚动页面回到顶部，它不会改变margin-top回到雇用价值。这是我的代码： JS

＆＃13;

$(".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);
               
                      
        });

＆＃13;

    <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>

＆＃13;

我已将!放在HTML中麻烦部分的开头和结尾处基本上在开始时，在这一个的顶部有另一个菜单（whan页面没有滚动，但滚动开始这个菜单占据了顶部位置并保持固定在顶部。现在问题是我正在使用div与图像里面两个链接没有正确显示内联，但在其自己的字段中内联比其他链接高出24px，希望这样做可以。谢谢你的帮助。

Answer 1

尝试将滚动功能中的代码编辑到下面：

{{1}}

滚动时更改bootstrap导航元素位置（相对于页面顶部）

1 个答案: