个人中心
gpt4 book ai didi

javascript - float 粘性侧边栏未按预期工作

转载 作者：行者123 更新时间：2023-11-30 23:46:58 24 4
gpt4 key购买 nike

已更新

我已尽力反射(reflect)我的情况。侧边栏在开始时不会显示，如果需要，用户可以将其隐藏。 HTML 文档如下所示:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Starter Template for Bootstrap</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/starter-template/">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Custom styles for this template -->
    <style>
      .starter-template {
          padding: 3rem 1.5rem;
          text-align: center;
        }

        #editUnitBlock{
          display: none;
          width: 100%;
          position: relative !important;
        }

        #editUnitBlock .ibox-content{
          padding: 25px 0px 10px 0px;
          border: 0px;
        }

        .floorStackColSmall {
            max-width: 58.333333%;
        }
        .floorStackColLarge {
            max-width: 83.333333%;
        }
        /*#unitAmenitiesLoading{
          position: relative;
        }*/
        #unitAmenitiesLoading.sticky {
            position:fixed;
            top:5px;
            width: inherit;
            max-width: 25%;
        }
    </style>
  </head>

  <body>

    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <main role="main" class="container-fluid main-conatiner">

      <div class="starter-template">
        <div class="row">
          <div class="col-md-2">
              <p> 
              
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et augue ut risus tincidunt euismod. Nullam in justo vel nisi suscipit interdum non eu risus. Nullam consectetur justo quis feugiat tristique. Morbi vel massa non erat mollis viverra at pretium erat. Mauris non faucibus lacus. Vivamus pharetra turpis in dui tristique imperdiet. Curabitur fringilla orci ipsum, a porta dolor lobortis venenatis. Suspendisse sodales tellus tempor, dignissim ligula eu, ultricies ante. Phasellus feugiat maximus purus nec ultricies.

              Donec semper ipsum in egestas semper. Curabitur gravida libero enim. Aliquam dapibus nulla in tellus molestie, in tincidunt erat accumsan. Donec ornare vitae risus ut condimentum. Donec tincidunt aliquam purus, eget tristique neque hendrerit id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris mollis lacus at lacinia scelerisque. Suspendisse porttitor rhoncus nulla, at viverra dui suscipit vitae. Sed a metus sed nulla tempus mattis in nec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consequat elit enim, non sollicitudin justo maximus sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean aliquet suscipit lectus tristique egestas. Phasellus ipsum orci, congue eu consectetur non, porta et neque. Cras vitae ultricies lorem. Quisque euismod suscipit erat et gravida.

              Sed mattis, dolor sed maximus finibus, erat quam aliquam ipsum, et semper odio ante ut odio. Nulla fermentum arcu a tellus maximus, ac auctor justo venenatis. Pellentesque condimentum, lorem non scelerisque maximus, purus sem lobortis quam, sit amet fermentum enim orci pharetra risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis sed nulla vel nisi auctor convallis. Nulla ut consectetur odio, sit amet pellentesque leo. Vestibulum dapibus pulvinar odio sed malesuada. Quisque molestie tellus eget quam maximus, eget pellentesque eros aliquam.

              Vestibulum fringilla, turpis et interdum lacinia, eros felis vulputate turpis, ut pulvinar velit lacus id lorem. Maecenas rutrum, arcu ut ultrices varius, purus nulla scelerisque ante, quis rutrum ante metus in nulla. Aenean bibendum, libero vehicula rutrum tristique, metus turpis tempus nisi, eget elementum nulla ipsum sed justo. Nunc sit amet faucibus leo, nec molestie mauris. Pellentesque sit amet ex posuere, pellentesque dolor et, porttitor ex. Sed faucibus sapien id luctus sodales. Morbi ac efficitur odio. Phasellus non molestie tortor. Sed id arcu ligula. Vestibulum ut maximus ex. Proin faucibus tincidunt tincidunt.

              Donec sed pretium ipsum. Praesent nec nisl vel libero lobortis vulputate sit amet nec diam. Mauris tortor erat, egestas ut tincidunt quis, bibendum et lorem. Integer laoreet, nunc quis lobortis iaculis, ipsum sem molestie orci, nec accumsan diam enim eget mi. Mauris porttitor purus eget nulla varius accumsan. Etiam gravida tempus turpis, vel bibendum lorem ullamcorper et. Sed non massa luctus, viverra arcu et, molestie nunc. Praesent eu quam et mauris pellentesque tempus. Etiam lacinia nunc eget mauris pellentesque faucibus. Fusce turpis ante, tincidunt vel sagittis at, pretium vel urna. Ut metus dui, aliquam id eros ac, tristique convallis sem. In ut leo tincidunt, interdum turpis eget, pulvinar neque. Donec nec sagittis quam. Donec nec lorem ex. Sed quis nisl id ex efficitur sollicitudin.

              </p>
          </div>
          <div id="floorStackTable" class="col-md-10 floorStackColLarge">

                    <a href="#" onclick="editUnit()">Show sidebar</a>
            <p> 
            
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et augue ut risus tincidunt euismod. Nullam in justo vel nisi suscipit interdum non eu risus. Nullam consectetur justo quis feugiat tristique. Morbi vel massa non erat mollis viverra at pretium erat. Mauris non faucibus lacus. Vivamus pharetra turpis in dui tristique imperdiet. Curabitur fringilla orci ipsum, a porta dolor lobortis venenatis. Suspendisse sodales tellus tempor, dignissim ligula eu, ultricies ante. Phasellus feugiat maximus purus nec ultricies.

                Donec semper ipsum in egestas semper. Curabitur gravida libero enim. Aliquam dapibus nulla in tellus molestie, in tincidunt erat accumsan. Donec ornare vitae risus ut condimentum. Donec tincidunt aliquam purus, eget tristique neque hendrerit id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris mollis lacus at lacinia scelerisque. Suspendisse porttitor rhoncus nulla, at viverra dui suscipit vitae. Sed a metus sed nulla tempus mattis in nec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consequat elit enim, non sollicitudin justo maximus sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean aliquet suscipit lectus tristique egestas. Phasellus ipsum orci, congue eu consectetur non, porta et neque. Cras vitae ultricies lorem. Quisque euismod suscipit erat et gravida.

                Sed mattis, dolor sed maximus finibus, erat quam aliquam ipsum, et semper odio ante ut odio. Nulla fermentum arcu a tellus maximus, ac auctor justo venenatis. Pellentesque condimentum, lorem non scelerisque maximus, purus sem lobortis quam, sit amet fermentum enim orci pharetra risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis sed nulla vel nisi auctor convallis. Nulla ut consectetur odio, sit amet pellentesque leo. Vestibulum dapibus pulvinar odio sed malesuada. Quisque molestie tellus eget quam maximus, eget pellentesque eros aliquam.

                Vestibulum fringilla, turpis et interdum lacinia, eros felis vulputate turpis, ut pulvinar velit lacus id lorem. Maecenas rutrum, arcu ut ultrices varius, purus nulla scelerisque ante, quis rutrum ante metus in nulla. Aenean bibendum, libero vehicula rutrum tristique, metus turpis tempus nisi, eget elementum nulla ipsum sed justo. Nunc sit amet faucibus leo, nec molestie mauris. Pellentesque sit amet ex posuere, pellentesque dolor et, porttitor ex. Sed faucibus sapien id luctus sodales. Morbi ac efficitur odio. Phasellus non molestie tortor. Sed id arcu ligula. Vestibulum ut maximus ex. Proin faucibus tincidunt tincidunt.

                Donec sed pretium ipsum. Praesent nec nisl vel libero lobortis vulputate sit amet nec diam. Mauris tortor erat, egestas ut tincidunt quis, bibendum et lorem. Integer laoreet, nunc quis lobortis iaculis, ipsum sem molestie orci, nec accumsan diam enim eget mi. Mauris porttitor purus eget nulla varius accumsan. Etiam gravida tempus turpis, vel bibendum lorem ullamcorper et. Sed non massa luctus, viverra arcu et, molestie nunc. Praesent eu quam et mauris pellentesque tempus. Etiam lacinia nunc eget mauris pellentesque faucibus. Fusce turpis ante, tincidunt vel sagittis at, pretium vel urna. Ut metus dui, aliquam id eros ac, tristique convallis sem. In ut leo tincidunt, interdum turpis eget, pulvinar neque. Donec nec sagittis quam. Donec nec lorem ex. Sed quis nisl id ex efficitur sollicitudin.

            </p>
          </div>
          <div class="col-md-3 " id="editUnitBlock">
            <div id="unitAmenitiesLoading" class="ibox-content">
              <div class="card">
                <div class="card-header">
                  Featured
                </div>
                <div class="card-body">
                  <h5 class="card-title">SIDEBAR TO BE STICKY</h5>
                  <a href="#" onclick="hideEditUnitBlock()">HideSideBar</a>
                  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio doloremque dicta consequuntur vel asperiores magnam totam, unde sequi rerum beatae excepturi praesentium dolorum nihil a. Provident asperiores alias consequuntur repudiandae.
                  </p>
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis consequatur iusto quidem nulla earum eos distinctio, tempore placeat rem, magni officia commodi mollitia qui quasi laborum. Facilis, delectus iure debitis!
                  </p>
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, soluta recusandae commodi esse! Reprehenderit officia facere aliquid ipsa, totam quod illo praesentium eaque nobis, corporis placeat est esse, repellendus perferendis.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <footer id="footer">
          <h2>Footer</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio asperiores suscipit aut quasi obcaecati tempora vel eum, reprehenderit dolores quidem deserunt explicabo quisquam repellendus! Possimus ex, esse in sed illum.
          </p>
        </footer><br type="_moz">

      </div>

    </main><!-- /.container -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <script>
      function editUnit(){
        showEditUnitBlock();
      }
      function showEditUnitBlock()
      {
         $('#editUnitBlock').show();
            // $('#unitAmenitiesLoading').floatit({
            //     limiter: 'footer',
            //     preserve_width: true,
            //     top_spacing: 40,
            //     bottom_spacing: 10,
            //     recalculate: true
            // });
          $('#floorStackTable').addClass("floorStackColSmall").removeClass("floorStackColLarge");
      }
      function hideEditUnitBlock()
      {
          $('#editUnitBlock').hide();
          $('#floorStackTable').addClass("floorStackColLarge").removeClass("floorStackColSmall");
      }
    </script>

    <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script type="text/javascript" src="jquery.floatit.js"></script>
    <script>
      $(function(){
            // $('#unitAmenitiesLoading').floatit({
            //     limiter: 'footer',
            //     preserve_width: true,
            //     top_spacing: 40,
            //     bottom_spacing: 10,
            //     recalculate: true
            // });
            // Cache our vars for the fixed sidebar on scroll


            var $sidebar = $('#unitAmenitiesLoading');

            // Get & Store the original top of our #sidebar-nav so we can test against it
            var sidebarTop = $sidebar.position().top;

            var $footer = $('#footer');
            var footerTop = $footer.position().top;

            // Edit the `- 10` to control when it should disappear when the footer is hit.
            var blogHeight = $('#floorStackTable').outerHeight() - 10;

            console.log(blogHeight);
            console.log(sidebarTop);
            console.log(footerTop);

            // Add the function below to the scroll event
            $(window).scroll(fixSidebarOnScroll);

            // On window scroll, this fn is called (binded above)
            function fixSidebarOnScroll(){

                // Cache our scroll top position (our current scroll position)
                var windowScrollTop = $(window).scrollTop();

            console.log(windowScrollTop);

                // Add or remove our sticky class on these conditions
                if (windowScrollTop >= blogHeight || windowScrollTop <= sidebarTop || window.innerHeight + window.scrollY > blogHeight){
                    // Remove when the scroll is greater than our #content.OuterHeight()
                    // or when our sticky scroll is above the original position of the sidebar
                    $sidebar.removeClass('sticky');
                }
                // Scroll is past the original position of sidebar
                else if (windowScrollTop >= sidebarTop){
                    // Otherwise add the sticky if $sidebar doesnt have it already!
                    if (!$sidebar.hasClass('sticky')){
                        $sidebar.addClass('sticky');
                    }
                }   
            }

      })
    </script>
  
  </body>
</html>

侧边栏似乎是固定的，但只有当我们向右滚动到页脚时才会出现。我希望侧面导航向上滚动，而不是直接移动到其相对位置。

请检查 jsfiddle 上提供的代码帮助我解决这个问题。顺便说一句，我愿意通过使用任何其他 jquery 插件甚至自定义脚本来解决这个问题。

我对 JQuery 框架很陌生，如果有人可以帮助我纠正 jsfiddle 代码，我将不胜感激。

  • 谢谢。

如果我能做些什么来进一步澄清我试图解决的这个问题，请告诉我。

更新:2.0我看起来像 http://webpop.github.io/jquery.pin/ ，在这里您可以看到一个框被固定在侧边栏上，它保持固定到某个滚动点，然后开始滚动。

最佳答案

您可以使用 CSS 的 position: Sticky; 来代替。这样您也不必担心在某个时刻添加类。

https://jsfiddle.net/htbLm8rw/

关于javascript - float 粘性侧边栏未按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59409947/

24 4 0
文章推荐： jquery - $.ajax() : Origin null is not allowed
文章推荐： jquery - 加载时自动将选定日期设置为 altField
文章推荐： python - 在 Python 中使用 lxml 遍历 XML 的最快/最佳方法
文章推荐： java - 我的 JPA/Hibernate 自定义类型有什么问题？
行者123
个人简介

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

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