改变引导导航元素位置滚动（相对于页面顶部）

Question

我在使用margintop属性更改元素位置时遇到问题。元素位于引导导航端内部。问题是它正确地更改了滚动页上的页边距，但当我将页面向后滚动到顶部时，它不会将页边距向后移动到租金值。这是我的代码：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中麻烦部分的开始和结束处，基本上在Begging中，在这个菜单的顶部有另一个菜单（whan页面没有滚动，但滚动开始时，此菜单占据顶部位置并固定在顶部。现在的问题是，我正在使用div with to两个链接中的图像，它们没有正确地显示在内联中，但在其自己的字段中与其他链接中的一些24px内联，希望这有意义。感谢所有帮助。




Answer 1

尝试将滚动函数中的代码编辑到下面：

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

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