Question

我知道有很多解决方案可以使用JQuery在特定点后停止元素滚动，但是我想使用普通Javascript来实现。

基本上，这是一个元素，一旦您向下滚动它就可以修复，并且我希望它不再在页面底部固定，这样就不会出现在页脚下方。

这是我当前的Javascript：

var fixmeTop = $('#childWidth').offset().top; //get initial position

$(window).scroll(function() {
var currentScroll = $(window).scrollTop(); // get current position

if (currentScroll >= fixmeTop - 100) {           // fix once scroll to or past element 

        var elementAdd = document.getElementById("childWidth");
        elementAdd.classList.add("afix");

} else {  
    var elementRemove = document.getElementById("childWidth");
    elementRemove.classList.remove("afix");  
}
});

修复元素的CSS：

.afix {
    position:fixed;
    z-index;9999;
    top:100px;
}

我尝试获取距页面底部#childWidth的距离，然后在距页面底部一定距离内滚动一次，并添加一个position:absolute;的CSS类，但是当我向下滚动至近端时，元素就消失了底部。

Answer 1

我相信您正在寻找position: sticky。这将是一个纯CSS解决方案；无需JS：

.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
  background-color: pink;
}

.HolyGrail-content {
  flex: 1;
  background-color: aqua;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 12em is the width of the columns */
  flex: 0 0 12em;
  background-color: red;
}

.HolyGrail-nav {
  /* put the nav on the left */
  order: -1;
  background-color: yellow;
}

header, footer { height: 100px; }
header { background-color: blue; }
footer { background-color: green; }

.nav-box-wrapper {
  position: sticky;
  top: 50px;
}

.nav-box {
  background-color: magenta;
  position: relative;
  top: 100px;
}

<!-- https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/ -->
<div class="HolyGrail">
  <header>…</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
      <p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed 
      <p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices 
      <p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor 
      <p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
      <p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed 
      <p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices 
      <p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor 
      <p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
      <p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed 
      <p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices 
      <p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor 
      <p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
      <p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed 
      <p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices 
      <p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor 
      <p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
      <p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed 
      <p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices 
      <p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor 
      <p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
      <p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed 
      <p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices 
      <p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor 
      <p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
      <p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed 
      <p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices 
      <p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor 
      <p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
    </main>
    <nav class="HolyGrail-nav">
      <div class="nav-box-wrapper">
        <div class="nav-box">
          <ul>
            <li>link 1</li>
            <li>link 2</li>
            <li>link 3</li>
            <li>link 4</li>
            <li>link 5</li>
            <li>link 6</li>
            <li>link 7</li>
            <li>link 8</li>
            <li>link 9</li>
          </ul>
        </div>
      </div>
    </nav>
    <aside class="HolyGrail-ads">…</aside>
  </div>
  <footer>…</footer>
</div>

请原谅所有丑陋的lorem ipsum，如果您以全屏模式运行，则应该可以看到它的运行状况。

这是一种快速的组合-可能有更好的方法，并且您想进行大量的浏览器测试。但是sticky位置属性可能会允许您描述的内容，而不需要HTML和CSS之外的任何代码。

javascript-停止固定元素在没有jquery的特定点后滚动

1 个答案: