javascript - 需要在页脚上方停止我的固定侧边栏-6ren

javascript - 需要在页脚上方停止我的固定侧边栏

转载作者：太空宇宙更新时间：2023-11-04 04:17:48

现在我知道，如果用户滚动到侧边栏的底部，侧边栏将变为固定状态并停留在用户页面上，同时他们会阅读其余的主要内容。但是现在我的固定 div 掉到了页脚中。那么，如何才能阻止它从父 DIV 中掉落到页脚中呢？

这是正在发生的事情的 fiddle :http://jsfiddle.net/95W8w/

这是我的 HTML 和 Javascript:

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blob.net</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<!-- INCLUDE THOSE JAVASCRIPTS AT THE BOTTOM FOR SPEED-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script src="js/jquery.sticky-scroll.min.js"></script>
    <!-- STOP INCLUDING THOSE JAVASCRIPT FILES-->
<script>
$(document).ready(function() {
    // Cache selectors for faster performance.
    var $window = $(window),
        $sidebar = $('#anchor'),
        $sidebarAnchor = $('#right');

    // Run this on scroll events.
    $window.scroll(function() {
        var window_top = $window.scrollTop();
        var div_top = $sidebarAnchor.offset().top;
        if (window_top > div_top) {
         // Make the div sticky.
         $sidebar.addClass('stick');
         $sidebarAnchor.height($sidebar.height());
        }
        else {
            // Unstick the div.
            $sidebar.removeClass('stick');
            $sidebarAnchor.height(0);
        }
    });
});
</script>
</head>
<body>
<!-- MAIN CONTAINER -->
<div id="container">

    <!-- HEADER -->
    <div id="header"> 
        <div id="header_text">
            <h1>This is a fancy header</h1>
        </div>
    </div>
    <!-- END HEADER -->


    <!-- MAIN CONTENT -->
    <div id="left">
        <div id="left_inside">
            <p>+1 literally bespoke seitan fashion axe retro semiotics.  Neutra forage sartorial, XOXO Shoreditch cornhole Blue Bottle.  Pork belly Wes Anderson bicycle rights sriracha single-origin coffee narwhal.  Shoreditch kogi Helvetica narwhal authentic Terry Richardson.  American Apparel pug banh mi salvia DIY, scenester shabby chic selfies Brooklyn.  8-bit iPhone vinyl, authentic pug post-ironic occupy craft beer bitters pork belly mustache brunch.  Sustainable next level ethnic gastropub Bushwick beard tote bag hashtag, ethical semiotics master cleanse.</p><p>Chia you probably haven't heard of them fingerstache gluten-free PBR&B.  YOLO Pinterest pork belly, slow-carb Marfa paleo sustainable.  Butcher asymmetrical salvia bespoke, small batch single-origin coffee slow-carb locavore photo booth.  Lo-fi VHS salvia 3 wolf moon swag banjo.  Ethical salvia iPhone, pop-up you probably haven't heard of them kogi keytar butcher bitters 90's.  Letterpress chillwave skateboard polaroid, retro fixie sriracha Pinterest Marfa before they sold out jean shorts ennui.  Paleo mlkshk lo-fi, XOXO before they sold out fixie squid four loko retro.</p><p>XOXO tattooed pork belly meh.  Mumblecore fashion axe wolf, synth Shoreditch Thundercats chillwave you probably haven't heard of them meggings Echo Park narwhal.  Organic polaroid Williamsburg Marfa master cleanse.  Neutra seitan chillwave, distillery gluten-free authentic ennui literally irony twee food truck Brooklyn.  Tousled iPhone yr, mustache hella VHS 3 wolf moon 8-bit.  Gentrify Marfa Banksy, organic kitsch pug High Life direct trade  lomo cornhole butcher pour-over PBR viral bitters.  Sustainable actually drinking vinegar synth, freegan fingerstache banjo PBR direct trade  Cosby sweater.</p><p>Truffaut Marfa locavore Carles.  Ethical tattooed fanny pack mumblecore, deep v mixtape synth.  Gastropub 8-bit keytar cliche banh mi.  Flexitarian tousled scenester disrupt, Pitchfork before they sold out mlkshk tattooed.  Vegan twee mlkshk synth polaroid Terry Richardson post-ironic, blog Intelligentsia master cleanse salvia mumblecore stumptown Godard.  Authentic tote bag 3 wolf moon twee, yr swag kale chips semiotics +1 four loko.  Cray Cosby sweater farm-to-table, seitan literally dreamcatcher fixie Williamsburg kogi roof party umami +1.</p><p>Master cleanse salvia fap, sartorial Helvetica banh mi Marfa literally Bushwick.  Mixtape PBR pickled Portland yr, drinking vinegar sustainable next level tote bag.  Next level scenester PBR&B, squid cornhole Thundercats flannel +1 small batch cliche paleo semiotics hoodie.  Whatever iPhone 8-bit, XOXO Marfa cardigan tote bag bicycle rights typewriter Shoreditch swag Intelligentsia chillwave wolf forage.  Semiotics salvia cardigan you probably haven't heard of them butcher Marfa Carles.  Street art Pinterest biodiesel flexitarian, photo booth 3 wolf moon art party Vice Echo Park kale chips pug.  Lo-fi yr plaid Shoreditch, fixie mustache squid.</p><p>Shabby chic locavore fanny pack forage brunch vinyl pork belly.  Bespoke Thundercats fixie pour-over, polaroid distillery aesthetic master cleanse.  Pug brunch pickled keytar Tumblr, trust fund tofu cornhole Helvetica kitsch fixie try-hard farm-to-table authentic.  YOLO Pitchfork deep v bespoke mumblecore cardigan.  Banh mi pickled aesthetic, Tonx lomo selfies Carles semiotics Bushwick.  Distillery leggings tattooed pork belly, stumptown Etsy selfies trust fund biodiesel hoodie narwhal four loko salvia.  Gluten-free 3 wolf moon cliche, drinking vinegar Brooklyn plaid Portland.</p><p>Sartorial Brooklyn biodiesel, quinoa pug locavore fashion axe PBR&B before they sold out hoodie.  Chia Terry Richardson bicycle rights, readymade fingerstache dreamcatcher Cosby sweater 90's occupy Odd Future pork belly.  Roof party gentrify viral cred art party, direct trade  butcher single-origin coffee tousled sriracha.  Leggings Etsy deep v, squid dreamcatcher iPhone twee Helvetica Pinterest Portland hoodie Brooklyn street art Carles.  Chia food truck roof party leggings next level, fashion axe Austin sustainable four loko.  Tattooed chambray Tumblr, keffiyeh craft beer try-hard Williamsburg letterpress Terry Richardson ethnic umami.  Blog church-key before they sold out biodiesel, craft beer Truffaut disrupt direct trade  yr vinyl salvia.</p><p>Locavore next level Tumblr Austin dreamcatcher ethnic Vice, hashtag you probably haven't heard of them Bushwick Portland 8-bit organic narwhal XOXO.  VHS asymmetrical keytar small batch, Brooklyn cray tattooed swag cardigan authentic distillery bespoke Terry Richardson pork belly.  PBR YOLO wayfarers plaid food truck hella narwhal deep v, lo-fi meggings selvage fap Carles photo booth direct trade.  Fap Wes Anderson dreamcatcher Carles.  Jean shorts aesthetic Williamsburg hoodie pickled freegan, banjo fap Banksy Shoreditch fashion axe occupy flannel meh retro.  3 wolf moon Odd Future ennui, tousled meggings Carles PBR.  Chambray photo booth semiotics Terry Richardson street art, meh Echo Park whatever drinking vinegar.</p><p>Farm-to-table single-origin coffee scenester, sustainable polaroid fingerstache distillery retro messenger bag.  Pug sartorial twee, viral American Apparel Echo Park meggings lomo.  American Apparel Cosby sweater Thundercats sriracha locavore selfies, artisan roof party cred hashtag single-origin coffee.  Mixtape quinoa butcher, PBR&B trust fund 90's American Apparel sriracha semiotics cred pour-over Thundercats 3 wolf moon.  Freegan asymmetrical tattooed trust fund next level try-hard.  Put a bird on it blog bicycle rights hoodie hella street art, swag dreamcatcher twee pop-up.  Freegan biodiesel pour-over post-ironic tote bag, hashtag gluten-free banjo fanny pack.</p><p>Food truck Blue Bottle hella post-ironic, messenger bag vegan mumblecore Etsy meh trust fund semiotics literally Truffaut Intelligentsia ethical.  Ethnic Bushwick butcher tofu, tattooed tote bag ethical Williamsburg shabby chic literally church-key pour-over keffiyeh Vice.  Cray PBR&B pop-up Blue Bottle fashion axe, master cleanse single-origin coffee selvage.  Lomo Truffaut four loko, kogi chambray Etsy ethnic seitan skateboard Shoreditch hella occupy.  90's pork belly Truffaut wayfarers, cray banh mi salvia yr craft beer Brooklyn swag tattooed pour-over pug Blue Bottle.  Typewriter stumptown literally selvage semiotics, keytar sartorial beard asymmetrical selfies.  Leggings bespoke narwhal Williamsburg American Apparel stumptown viral, paleo umami freegan swag.</p><p>Helvetica kitsch 3 wolf moon Odd Future organic, food truck Terry Richardson fixie shabby chic small batch four loko hoodie YOLO forage.  XOXO hoodie organic, Bushwick banh mi cray Tonx scenester deep v typewriter ennui bitters fanny pack art party butcher.  Swag semiotics aesthetic tofu try-hard.  Hoodie food truck flannel church-key, next level try-hard +1 aesthetic wayfarers chia actually keffiyeh Neutra tattooed.  Kogi bitters cred Pinterest.  Pitchfork four loko banh mi lomo drinking vinegar art party, iPhone roof party raw denim Echo Park kogi 90's asymmetrical.  Authentic ethnic bitters, cardigan polaroid stumptown DIY PBR&B Brooklyn ennui street art.</p><p>Food truck chia 3 wolf moon fingerstache umami.  Messenger bag kitsch art party, Banksy Williamsburg cornhole forage Godard retro Cosby sweater cray jean shorts Neutra.  Lo-fi mlkshk gastropub, fanny pack tattooed Banksy before they sold out PBR.  Deep v tote bag mumblecore, art party semiotics Thundercats twee 90's cred Etsy you probably haven't heard of them.  Polaroid food truck banh mi, cliche YOLO DIY vegan ugh.  Craft beer freegan vegan, chambray bespoke mlkshk typewriter hella lo-fi dreamcatcher Thundercats shabby chic mumblecore.  Banh mi XOXO Echo Park locavore, Tonx Terry Richardson pork belly keffiyeh tote bag fashion axe iPhone.</p><p>Banjo umami direct trade  irony, pork belly squid cornhole 8-bit shabby chic Etsy.  DIY Vice tousled kale chips High Life.  Lomo PBR polaroid Tonx, whatever Marfa VHS chia street art.  Paleo cred you probably haven't heard of them, messenger bag Helvetica disrupt +1.  Church-key bicycle rights locavore, cardigan chillwave messenger bag ethical.  Gluten-free roof party kogi fingerstache fixie freegan.  Post-ironic ennui disrupt distillery.</p><p>Pickled Brooklyn chia, chillwave fanny pack wayfarers tofu asymmetrical.  Street art mlkshk flannel, single-origin coffee PBR&B semiotics pork belly High Life butcher PBR chambray kogi freegan farm-to-table.  Wes Anderson vinyl sartorial ethnic ethical, 8-bit cornhole umami hella fap asymmetrical.  Neutra hoodie messenger bag PBR&B.  Art party next level small batch letterpress, iPhone hoodie dreamcatcher mlkshk whatever pickled pop-up.  Pour-over biodiesel High Life, cray cred Blue Bottle Pitchfork YOLO.  Chia dreamcatcher lo-fi Schlitz, gentrify scenester tofu Brooklyn.</p>
        </div>
    </div>
    <!-- END MAIN CONTENT -->


    <!-- SIDEBAR -->
    <div id="right">
        <div id="anchor">
            <div class="elements row1">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Photos</a></li>
                </ul>
            </div>
            <div class="elements row2">
            </div>
            <div class="elements row3">
            </div>
            <div class="elements row4">
            </div>
            <div class="elements row5">
            </div>
        </div>
    </div>
    <!-- END SIDEBAR -->


    <div class="clear"></div>
</div><!-- END MAIN CONTAINER -->   
</body>
</html>

这是我的 CSS:

#container {
    background-color:#CCC;
    margin-top: 100px;
    margin-right: auto;
    margin-bottom: 100px;
    margin-left: auto;  
    width: 1200px;
    height: auto;
    box-shadow: 0px 0px 10px 2px rgba(119, 119, 119, 0.75);
    -moz-box-shadow: 0px 0px 10px 2px rgba(119, 119, 119, 0.75);
    -webkit-box-shadow: 0px 0px 10px 2px rgba(119, 119, 119, 0.75);
}

/* HEADER CSS */

#header {
    width: 100%;
    height: 75px;
    background-color: #FC6;
    padding-top: 2px;
    padding-bottom: 10px;
}
#header_text h1{
    font-family: "Arial Black", Gadget, sans-serif;
    margin-left: 32%;
}

/* CONTENT CSS */

#left {
    width: 800px;
    height: auto;   
    background-color: #CF9; 
    float: left;
}
#left_inside {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 30px;
}
#left p {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
}

/* SIDEBAR CSS */

#right {
    width: 400px;
    height: auto;   
    background-color:#6CF;
    float: right;
}
.elements {
    border: 1px solid #000; 
    height: auto;
    width: 400px;
    min-height: 180px;
}
    /* NAV BAR STYLES */

    #right ul {
        list-style-type: none;
        margin-left: 25%;
    }
    #right ul li{
        margin-top: 30px;
    }
    #right ul li a:link{
        text-decoration: none;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 18px;
        color: #000;
    }
    #right ul li a:hover{
        color: #CCC;
    }

        /* ROWS */

        .row1 {
            background-color:#930;
        }
        .row2 {
            background-color: #633;
        }
        .row3 {
            background-color: #C66;
        }
        .row4 {
            background-color: #96F;
        }
        .row5 {
            background-color: #FF0;
        }

/* END SIDEBAR CSS */

.clear {
    clear: both;    
}

/* MAKE SIDE BAR STICKY*/
.stick {
    position: fixed;
    bottom: 0;
}

最佳答案

这里是demo，你可以根据自己的需要调整代码 http://jsfiddle.net/Mdrpg/1/

我已经声明并分配了一个我在条件(第二个如果)中使用的变量，这样当我们再次向顶部滚动时，侧边栏的 css 的变化使其再次可滚动只发生一次，而不是一次又一次。

var set=0;

你在 scroll 事件的回调函数中看到的变量是在我们修复侧边栏或使其再次滚动时使用侧边栏属性 top 的值。它当我们更改其 position 类型时，将使侧边栏保留在窗口中。

var currPos = document.getElementById('a').getBoundingClientRect();

在第一个 if 条件中，根据区域在文档中的位置，根据区域的顶部偏移量检查自现在以来窗口滚动了多少的值在预览时侧边栏将停止滚动 (演示中的橙色区域)。如果满足第一个 if 条件，set 将被赋值为 1

在第二个 if 条件中，第一个 if 条件中语句为真的条件通过添加一个条件与 set==1 反转 ，正如我在上面解释的那样，这个标准将导致只执行一次使侧边栏再次可滚动的过程，因为我们将重新分配 0 到 set在这里。

编辑对于给定的解决方案在 web 开发人员的敌人 (IE < 10) 中工作 :) 将其放在文档中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

关于javascript - 需要在页脚上方停止我的固定侧边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19641862/

文章推荐： python - 更新文件中的字典

文章推荐： C动态数组；无法删除

文章推荐： python - "python3 unattended upgrade shutdown"是什么进程？

文章推荐： regex - 正则表达式(url.rewrite)

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 需要在页脚上方停止我的固定侧边栏