如何将粘性菜单包含在浮动侧边栏中？

Question

I made this jsfiddle: https://jsfiddle.net/0yd516er/ which tells most of the problem.我制作了这个 jsfiddle： https ://jsfiddle.net/0yd516er/，它说明了大部分问题。

How to stop the sticky menu from leaving the wrapper it is inside if the menu is inside a floating block?如果菜单位于浮动块内，如何阻止粘性菜单离开它所在的包装器？ I tried all kinds of js plugins for this but those only work with relative div's that aren't floating I suppose.我为此尝试了各种 js 插件，但那些只适用于我认为不浮动的相对 div。 The wrapper wraps around the floating div's using overflow: hidden;包装器使用溢出环绕浮动 div：隐藏；

The height of the .item isn't know. .item 的高度不知道。

HTML: HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
    <div class="header"></div>
    <div class="wrap">
        <div class="content">
            <div class="item">Height of these elements isn't known</div>
            <div class="item">Test test</div>
            <div class="item">Test test</div>
            <div class="item">Test test</div>
        </div>
        <div class="sidebar">
            <div class="menu">
                <div class="menu-top">Top of the menu should stay here</div>
                <div class="menu-bottom">This part of the menu needs to be sticky, but stop at the end of .wrap</div>
            </div>
        </div>
    </div>
    <div class="footer"></div>
</body>

JS: JS：

$(document).ready(function(){
    // to set the width right even when position is fixed
    var divWidth = $('.sidebar').width(); 
    $('.menu-bottom').css('width', divWidth+'px');


    var fixmeTop2 = $('.menu-bottom').offset().top;
    $(window).scroll(function() {
        var currentScroll2 = $(window).scrollTop();
        if (currentScroll2 >= fixmeTop2) {
            $('.menu-bottom').css({
                position: 'fixed',
                top: '20px'      
            });
        } else {
            $('.menu-bottom').css({
                position: 'relative'
        });
    }
});
});

CSS: CSS：

body {
    margin: 0;
    padding: 0;
    font-size: 16px;
}

.wrap, .footer, .header {
    position: relative;
    width: 75%;
    margin: auto;
    overflow: hidden;
    background-color: #EBEBEB;
}

.footer, .header {
    height: 200px;
    background-color: #999;
}

.footer {
    height: 2000px;
}

.content {
    float: left;
    position: relative;
    width: 70%;
}

.sidebar {
    float: left;    
    position: relative;
    width: 30%;
    background-color: #0CF;
}

.item {
    height: 300px;
    position: relative;
    width: 100%;
    background-color: #0F6;
    margin-bottom: 20px;
    box-sizing: border-box;
    padding: 20px;
}

.menu-top {
    height: 120px;  
    box-sizing: border-box;
    padding: 20px;
}

.menu-bottom {
    z-index: 99;
    position: relative;
    height: 300px;
    background-color: red;  
    box-sizing: border-box;
    padding: 20px;
}

Answer 1

Did some optimisation, toggling an additional sticky class.做了一些优化，切换了一个额外的sticky类。 Checked on Firefox with smoothscroll and a variety of padding-margin and seems to respond to the exact positions :在 Firefox 上使用 smoothscroll 和各种 padding-margin 检查，似乎对确切位置有反应：

Demo演示

.sticky {
position: fixed;
}

$(function() {

var wrap = $('.wrap'),
lowmenu = $('.menu-bottom'),
range = $('.sidebar').width(),
fromtop = 60,
edge = parseInt($('.item:last').css('margin-bottom'));

lowmenu.css('width', range);

var fixtop = lowmenu.offset().top-fromtop,
lowpoint = wrap.offset().top+wrap.outerHeight()-lowmenu.outerHeight()-edge-fromtop,
placetop = wrap.outerHeight()-lowmenu.outerHeight()-$('.menu-top').outerHeight()-edge;

$(window).scroll(function() {

    var current = $(window).scrollTop();

    if (current >= fixtop && current <= lowpoint && !stuck()) lowmenu.addClass('sticky').css('top', fromtop);
    else if (current > lowpoint && stuck()) lowmenu.removeClass('sticky').css('top', placetop);
    else if (current < fixtop && stuck()) lowmenu.removeClass('sticky').css('top', 0);;
    });

function stuck() {

    return lowmenu.hasClass('sticky');
}
});

You can set fromtop to any number.您可以将fromtop设置为任何数字。 Margin on the last .item should also be accounted for...最后一个.item边距也应考虑.item ...

如何将粘性菜单包含在浮动侧边栏中？

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-09-23 20:02:16

如何将粘性菜单包含在浮动侧边栏中？

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-09-23 20:02:16

解决方案1
1 已采纳 2015-09-23 20:02:16