jQuery 位置 DIV 固定在滚动顶部

IT技术 javascript jquery html css positioning
2021-02-24 12:26:40

我有一个相当长的页面,在布局的菜单中,有一个弹出菜单。我希望菜单的弹出部分显示在页面顶部,即使用户已将菜单栏滚动到视野之外。这是菜单的 HTML

<div id="task_flyout">
        <div id="info">Compare up to 3 cards side-by-side. Click “Add to Compare” next to any card to get started…</div>
        <div id="card1" class="card">
            <div class="cardimage"></div><div class="cardname"><a href="#"></a></div><div class="remove"><a href="#"><img src="images/remove.png" alt="remove card" width="12" height="12" border="0" /></a></div>
        </div>
        <div id="card2" class="card">
            <div class="cardimage"></div><div class="cardname"><a href="#"></a></div><div class="remove"><a href="#"><img src="images/remove.png" alt="remove card" width="12" height="12" border="0" /></a></div>
        </div>
        <div id="card3" class="card">
            <div class="cardimage"></div><div class="cardname"><a href="#"></a></div><div class="remove"><a href="#"><img src="images/remove.png" alt="remove card" width="12" height="12" border="0" /></a></div>
        </div>
        <div id="compare"><a href="comparecards.php">Compare Now</a></div>
    </div>
    <div id="task_arrow"></div>
</div>

这是脚本。我在滚动时将导航栏“.frozen_top”锁定到浏览器窗口的顶部(到目前为止工作正常),但此外,一旦该栏锁定,我想更改“#task_flyout”上的 CSS 定位。

$(window).scroll(function(){
if($(document).width() > 900) { 
    $(".frozen_top").css("top",Math.max(130,$(this).scrollTop()));
    if($(this).scrollTop() > 135) {
        $(".frozen_top").css("margin-top","-95px");
                    $("#task_flyout").css("top","53px");    
    } else {
        $(".frozen_top").css("margin-top","-5px");
                    $("#task_flyout").css("top","33px");    
    }
}

});
1个回答

与其这样做,不如在position:fixed, top:0; left:0;您的窗口滚动通过某个高度后直接弹出弹出窗口:

jQuery

  $(window).scroll(function(){
      if ($(this).scrollTop() > 135) {
          $('#task_flyout').addClass('fixed');
      } else {
          $('#task_flyout').removeClass('fixed');
      }
  });

css

.fixed {position:fixed; top:0; left:0;}

例子

有什么办法可以在向下滚动时在某个点停止?
2021-04-20 12:26:40
@GregoryR。你可以尝试添加一个和小于:jsfiddle.net/FyEGN/984否则你可能需要用绝对定位做一些更复杂的事情
2021-04-20 12:26:40
谢谢,我什至没有想到这一点。我会试试的。
2021-04-21 12:26:40