jQuery位置DIV固定在滚动的顶部 [英] jQuery position DIV fixed at top on scroll

问题描述

我有一个相当长的页面，在布局的菜单中，有一个弹出菜单。我想这个菜单的弹出部分显示在页面的顶部，即使用户已经滚动菜单栏的视图。这是菜单的HTML

I have a page that's fairly long and within the layout's menu, there's a flyout menu. I'd like this flyout portion of the menu to show at the top of the page even when the user has scrolled the menu bar out of view. Here's the HTML for the menu

<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到滚动浏览器窗口的顶部（这到目前为止正常工作），但另外，我想更改CSS定位在#task_flyout一旦锁定。

And here's the script. I'm locking the nav bar ".frozen_top" to the top of the browser window on scroll (that's working correctly so far), but additionally, I'd like to change the CSS positioning on "#task_flyout" once that bar locks.

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

});

推荐答案

弹出 position：fixed，top：0; left：0; 一旦您的窗口滚动通过一定高度：

instead of doing it like that, why not just make the flyout position:fixed, top:0; left:0; once your window has scrolled pass a certain height:

jQuery
$ b

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

示例

这篇关于jQuery位置DIV固定在滚动的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！