个人中心
gpt4 book ai didi

jquery - 无法在顶部使用固定菜单栏制作滚动后修复的 div

转载 作者：行者123 更新时间：2023-11-28 00:24:04 24 4
gpt4 key购买 nike

我有一个顶部有固定菜单栏的页面。

我还有一个 div，它位于菜单栏下方，中间还有另一个 div。

我希望 div(第三个)在到达菜单栏(第一个 div)正下方后固定在菜单栏(第一个)下方滚动。我知道这很令人困惑，所以我提到了 JSFiddle 链接。

https://jsfiddle.net/acharyarupak391/3659kn2f/29/ 

$(function() {
  // Check the initial Poistion of the Sticky Header
  var stickyTop = $('#sticky').offset().top;

  $(window).scroll(function() {
    if ($(window).stickyTop() > stickyTop) {
      $('#sticky').css({ position: 'fixed', top: '100px' });
    } else {
      $('#sticky').css({ position: 'static', top: '100px' });
    }
  });
});
body {
  margin-top: 0;
  margin-left: 0;
  text-align: center;
  color: white;
}

#menubar {
  background: red;
  width: 100%; height: 100px;
  position: fixed;
  z-index: 100;
  opacity: 0.8;
  /* made this transparent so that it would be visible what is happening behind */
}

#unsticky {
  position: absolute;
  background: brown;
  margin-top: 100px;
  width: 100%; height: 100px;
}

#sticky {
  position: absolute;
  margin-top: 200px;
  background: green;
  width: 100%; height: 750px;
}
<body>
  <div id="menubar">
    This is the fixed menubar
  </div>

  <div id="unsticky">
    this is the unsticky/movable div
  </div>

  <div id="sticky">
    as this div reaches just below the menubar(first div) after scrolling, it is supposed to be fixed there
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
  </div>
</body>

最佳答案

您可以通过使用 Sticky Positioning 仅使用 CSS 来完成此操作

您可能遇到的问题(无论您使用 CSS 还是 JS 解决方案)是，如果 sticky 内容高于视口(viewport)，您将无法滚动到它的底部一次 ' fixed'，除非你给它一个固定的高度和overflow:auto;。因此，最合适的解决方案将具体取决于您的用例。希望这对您有所帮助。

body {
  margin-top: 0;
  margin-left: 0;
  text-align: center;
}

#menubar {
  background: red;
  width: 100%;
  height: 100px;
  position: sticky;
  z-index: 100;
  opacity: 0.8;
  top: 0;
  color: white;
  /* made this transparent so that it would be visible what is happening behind */
}

#unsticky {
  background: brown;
  color: white;
  width: 100%;
  height: 100px;
}

#sticky {
  position: sticky;
  top: 100px;
  color: white;
  background: green;
}
<body>
  <div id="menubar">
    This is the fixed menubar
  </div>

  <div id="unsticky">
    this is the unsticky/movable div
  </div>

  <div id="sticky">
    as this div reaches just below the menubar(first div) after scrolling, it is supposed to be fixed there
  </div>

  <div>
    <p>Some more unsticky content Some more unsticky content</p>
    <p>Some more unsticky content Some more unsticky content</p>
    <p>Some more unsticky content Some more unsticky content</p>
    <p>Some more unsticky content Some more unsticky content</p>
    <p>Some more unsticky content Some more unsticky content</p>
    <p>Some more unsticky content Some more unsticky content</p>
    <p>Some more unsticky content Some more unsticky content</p>
  </div>
</body>

如果纯 CSS 解决方案不能让您满意，您可以使用 JavaScript 执行类似的操作，但您的方法仍然存在根本性问题。所有的绝对定位都使事情变得复杂，我不确定它是否需要，但主要问题是一旦 #sticky 内容被 fixed 你将如何再次取消修复它？用户将如何获得其下方的内容？会有吗？如果他们在小型手机上怎么办？如果元素的高度发生变化(可能是由于浏览器或字体大小的变化)怎么办？您的方法将完全取决于您要实现的目标。我不确定我是否完全理解那是什么，但这是您更正后的 JS。也许在这两个示例之间，您可以构建适合您的用例的东西。

$(function() {
  //define the sticky element 
  var $sticky = $('#sticky'); //fetch once use many times
  //define the point at which sticky gets stuck
  var stickAt = $('#menubar').height();
  // Check the initial position of the Sticky Header
  var stickyTop = $sticky.offset().top - $(window).scrollTop();

  $(window).scroll(function() {

    stickyTop = $sticky.offset().top - $(window).scrollTop();
    //console.log(stickyTop, stickAt);

    if (stickyTop < stickAt) {
      $('#sticky').css({
        position: 'fixed',
        top: '100px',
        marginTop: 0,
        height: '100%',
        overflow: 'auto'
      });
    } else {
    /* As soon as #sticky becomes fixed the scrollPosition will change and this gets triggers so you're kind of stuck in a loop. UNCOMMENT to see what I mean
      $('#sticky').css({
        position: 'static',
        marginTop: '200px'
      });
      */
    }
  });
});
body {
  margin-top: 0;
  margin-left: 0;
  text-align: center;
  color: white;
}

#menubar {
  background: red;
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
  /*added top*/
  z-index: 100;
  opacity: 0.8;
  /* made this transparent so that it would be visible what is happening behind */
}

#unsticky {
  position: absolute;
  top: 0;
  background: brown;
  margin-top: 100px;
  width: 100%;
  height: 100px;
}

#sticky {
  position: static;
  margin-top: 200px;
  background: green;
  width: 100%;
  height: 750px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id="menubar">
    This is the fixed menubar
  </div>

  <div id="unsticky">
    this is the unsticky/movable div
  </div>

  <div id="sticky">
    as this div reaches just below the menubar(first div) after scrolling, it is supposed to be fixed there
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
    <p>q</p>
  </div>
</body>

关于jquery - 无法在顶部使用固定菜单栏制作滚动后修复的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54737367/

24 4 0
文章推荐： c++ - 在 C++ 上包含文件以避免循环依赖的 final方法
文章推荐： javascript - 隐藏 mouseup 上的元素，除非它有内容
文章推荐： javascript - 使用javascript嵌入动态大小的网页
文章推荐： c++ - fstream 作为 bool 和 fstream.good() 函数的行为
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com