Question

我正在尝试使用jQuery滚动事件重新定位滚动元素并仅调整margin-top属性。元素在bootstrap导航中，因此它显示在桌面上导航内的所有其他元素和移动设备上它刚刚固定在左上角corner.element包含两个不同页面语言的标记链接。我的代码是： HTML：

<div class="navbar yamm navbar-default">
    <div class="flags">
        <a href="#" class="flag-link-fiverr"><img src="UK_flag.png" alt="English"></a>
        <a href="#" class="flag-link-fiverr"><img src="DK_flag.png" alt="Danish"></a>
    </div>
      <div class="navbar-header">
....

JS：

var scrollingDiv = $(".flags").offset().top - $(window).scrollTop();


    $(window).scroll(function(){

            if(scrollingDiv > 100) {
                $(".flags").css("margin-top", "24px");
            }

            if(scrollingDiv == 92) {
                $(".flags").css("margin-top", "10px");
            }



            console.log(scrollingDiv);


    });

控制台日志总是显示92位置。一个注释页面包含1个以上导航导航的导航，所以我需要这个保证金最高的修复程序。导航下来它很好地重新定位，但它回来了它保持margin-top属性为10px，旗帜跳出对齐。感谢所有未来的激光：）

Answer 1

将var scrollingDiv = $(".flags").offset().top - $(window).scrollTop();放在你的$(window).scroll(function(){});

中

当你声明它的当前状态时。 scrollingDiv会保留92px，因为它只会在页面加载时设置它。

如果在scroll()函数内，它会在用户滚动时更新value。

小型演示（我不知道你的实际布局）

＆＃13;

$(window).scroll(function(){
    
      var scrollingDiv = $(".flags").offset().top - $(window).scrollTop();

            if(scrollingDiv > 100) {
                $(".flags").css("margin-top", "24px");
            }

            if(scrollingDiv >= 92 && scrollingDiv < 100) {
                $(".flags").css("margin-top", "10px");
            }



            console.log(scrollingDiv);


    });

＆＃13;

.scroll-container {
  height: 2000px;
  overflow: auto;
}

.scroll-container .flags {
  position: relative;
  top: 120px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll-container">
  <div class="flags">
        <a href="#" class="flag-link-fiverr"><img src="UK_flag.png" alt="English"></a>
        <a href="#" class="flag-link-fiverr"><img src="DK_flag.png" alt="Danish"></a>
    </div>
</div>

＆＃13;

使用jQuery重新定位滚动元素

1 个答案: