Как сохранить липкое меню внутри плавающей боковой панели?

Я сделал это jsfiddle: https://jsfiddle.net/0yd516er/, который рассказывает большую часть проблемы.Как сохранить липкое меню внутри плавающей боковой панели?

Как остановить липкое меню от выхода из оболочки, если оно находится внутри плавающего блока? Я пробовал всевозможные js-плагины для этого, но они работают только с относительными div, которые не плавают, я полагаю. Обертка обертывается вокруг плавающего div с использованием переполнения: hidden;

Высота .item не знает.

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:

$(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:

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; 
}

источник

2015-09-23 coder

ли некоторые оптимизации, переключая дополнительный sticky класс. Проверено на Firefox с smoothscroll и разнообразием отступа рентабельностью и, кажется, реагирует на точные позиции:

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'); 
} 
});

Вы можете установить fromtop на любое число. Маржа на последнем .item также должна учитываться ...

источник

2015-09-23 20:02:16 Shikkediel

Как сохранить липкое меню внутри плавающей боковой панели?

ответ

Смежные вопросы