0

Как закрепить ленту, пока я скроллю меню?

$(function(){
            Profile.load();
        });

        Profile = {
            load:function(){
                this.links();
                this.social();
                this.accordion();
            },
            links:function(){
                $('a[href="#"]').click(function(e){
                    e.preventDefault();
                });
            },
            social:function(){
                $('.accordion .about-me .photo .photo-overlay .plus').click(function(){
                    $('.social-link').toggleClass('active');
                    $('.about-me').toggleClass('blur');
                });
                $('.social-link').click(function(){
                    $(this).toggleClass('active');
                    $('.about-me').toggleClass('blur');
                });
            },
            accordion:function(){
                var subMenus = $('.accordion .sub-nav').hide();
                $('.accordion > a').each(function(){
                    if($(this).hasClass('active')){
                        $(this).next().slideDown(100);
                    }
                });
                $('.accordion > a').click(function(){
                    $this = $(this);
                    $target =  $this.next();
                    $this.siblings('a').removeAttr('class');
                    $this.addClass('active');
                    if(!$target.hasClass('active')){
                        subMenus.removeClass('active').slideUp(100);
                        $target.addClass('active').slideDown(100);
                    }
                    return false;
                });
            }
        }
body{
    margin:0;
    color:#444;
    font:400 16px/18px Roboto, sans-serif;
}
.accordion-wrap{
    top:0;
    left:0;
    position:fixed;
    height:100%;
    width: 220px;
    overflow: auto;
}
.accordion{
    width:100%;
    max-width:280px;
    overflow:hidden;
    border-radius:3px;
    background: #147ec3;
    box-shadow:0 17px 50px 0 rgba(0,0,0,.19),0 12px 15px 0 rgba(0,0,0,.24);
}
.accordion>a{
    color: whitesmoke;
    padding:15px;
    display:block;
    text-decoration:none;
    transition:all .3s ease-in-out 0s;
}
.accordion>a:not(:last-child){
    border-bottom:1px solid rgba(0,0,0,.2);
}
.accordion>a:hover,
.accordion>a.active{
    background:rgb(25, 83, 148);
}
.accordion>a.active{
    color:white;
}

.accordion .sub-nav{
    display:none;
    color:#374046;
    overflow:hidden;
    background:#ecf0f1;
}
.accordion .sub-nav.open{
    display:block;
}
.accordion .sub-nav a{
    display:block;
    color:inherit;
    font-weight:300;
    padding:10px 15px;
    text-decoration:none;
    transition:all .2s ease-in-out 0s;
}
.accordion .sub-nav a:not(:last-child){
    border-bottom:1px solid rgba(0,0,0,.1);
}
.accordion .sub-nav a:hover{
    background: rgba(255, 151, 13, 0.44);
    box-shadow:5px 0 0 #e58a0b inset;
}

.accordion .html{
    padding:15px;
}
.accordion .about-me{
    text-align:center;
    position:relative;
}
.accordion .about-me h4{
    margin-bottom:0;
}
.accordion .about-me p{
    font-size:14px;
    font-weight:300;
    margin-bottom:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion-wrap">
    <div class="accordion">
        <a href="#" class="active"><i class="fa fa-envelope"></i> Profile</a>
        <div class="sub-nav">
            <a href="#">Inbox <span class="pull-right alert-numb">11</span></a>
            <a href="#">Important <span class="pull-right alert-numb">10</span></a>
            <a href="#">Sent</a>
            <a href="#">Draft</a>
            <a href="#">Trash</a>
            <a href="#">All messages</a>
        </div>
        <a href="#"><i class="fa fa-envelope"></i> Chat</a>
        <div class="sub-nav">
            <a href="#">Inbox <span class="pull-right alert-numb">11</span></a>
            <a href="#">Important <span class="pull-right alert-numb">10</span></a>
            <a href="#">Sent</a>
            <a href="#">Draft</a>
            <a href="#">Trash</a>
            <a href="#">All messages</a>
        </div>
        <a href="#"><i class="fa fa-envelope"></i> Messages <span class="pull-right alert-numb">21</span></a>
        <div class="sub-nav">
            <a href="#">Inbox <span class="pull-right alert-numb">11</span></a>
            <a href="#">Important <span class="pull-right alert-numb">10</span></a>
            <a href="#">Sent</a>
            <a href="#">Draft</a>
            <a href="#">Trash</a>
            <a href="#">All messages</a>
        </div>
        <a href="#"><i class="fa fa-dribbble"></i> Dribbble Invite</a>
        <div class="sub-nav">
            <a href="#">Inbox <span class="pull-right alert-numb">11</span></a>
            <a href="#">Important <span class="pull-right alert-numb">10</span></a>
            <a href="#">Sent</a>
            <a href="#">Draft</a>
            <a href="#">Trash</a>
            <a href="#">All messages</a>
        </div>
        <a href="#"><i class="fa fa-envelope"></i> Profile</a>
        <div class="sub-nav">
            <a href="#">Inbox <span class="pull-right alert-numb">11</span></a>
            <a href="#">Important <span class="pull-right alert-numb">10</span></a>
            <a href="#">Sent</a>
            <a href="#">Draft</a>
            <a href="#">Trash</a>
            <a href="#">All messages</a>
        </div>
        <a href="#"><i class="fa fa-envelope"></i> Chat</a>
        <div class="sub-nav">
            <a href="#">Inbox </a>
            <a href="#">Important </a>
            <a href="#">Sent</a>
            <a href="#">Draft</a>
            <a href="#">Trash</a>
            <a href="#">All messages</a>
        </div>
        <a href="#"><i class="fa fa-envelope"></i> Messages</a>
        <div class="sub-nav">
            <a href="#">Inbox </a>
            <a href="#">Important </a>
            <a href="#">Sent</a>
            <a href="#">Draft</a>
            <a href="#">Trash</a>
            <a href="#">All messages</a>
        </div>
        <a href="#"><i class="fa fa-dribbble"></i> Dribbble Invite</a>
        <div class="sub-nav">
            <a href="#">Inbox </a>
            <a href="#">Important </a>
            <a href="#">Sent</a>
            <a href="#">Draft</a>
            <a href="#">Trash</a>
            <a href="#">All messages</a>
        </div>
        <a href="#"><i class="fa fa-envelope"></i> Messages </a>
        <div class="sub-nav">
            <a href="#">Inbox </a>
            <a href="#">Important </a>
            <a href="#">Sent</a>
            <a href="#">Draft</a>
            <a href="#">Trash</a>
            <a href="#">All messages</a>
        </div>
        <a href="#"><i class="fa fa-dribbble"></i> Dribbble Invite</a>
        <div class="sub-nav">
            <a href="#">Inbox </a>
            <a href="#">Important </a>
            <a href="#">Sent</a>
            <a href="#">Draft</a>
            <a href="#">Trash</a>
            <a href="#">All messages</a>
        </div>
        <a href="#"><i class="fa fa-envelope"></i> Profile</a>
        <div class="sub-nav">
            <a href="#">Inbox </a>
            <a href="#">Important </a>
            <a href="#">Sent</a>
            <a href="#">Draft</a>
            <a href="#">Trash</a>
            <a href="#">All messages</a>
        </div>
        <a href="#"><i class="fa fa-envelope"></i> Chat</a>
        <div class="sub-nav">
            <a href="#">Inbox </a>
            <a href="#">Important </a>
            <a href="#">Sent</a>
            <a href="#">Draft</a>
            <a href="#">Trash</a>
            <a href="#">All messages</a>
        </div>
        <a href="#"><i class="fa fa-envelope"></i> Messages</a>
        <div class="sub-nav">
            <a href="#">Inbox </a>
            <a href="#">Important </a>
            <a href="#">Sent</a>
            <a href="#">Draft</a>
            <a href="#">Trash</a>
            <a href="#">All messages</a>
        </div>
        <a href="#"><i class="fa fa-dribbble"></i> Dribbble Invite</a>
        <div class="sub-nav">
            <a href="#">Inbox </a>
            <a href="#">Important </a>
            <a href="#">Sent</a>
            <a href="#">Draft</a>
            <a href="#">Trash</a>
            <a href="#">All messages</a>
        </div>
        <a href="#"><i class="fa fa-envelope"></i> Chat</a>
        <div class="sub-nav">
            <a href="#">Inbox </a>
            <a href="#">Important</a>
            <a href="#">Sent</a>
            <a href="#">Draft</a>
            <a href="#">Trash</a>
            <a href="#">All messages</a>
        </div>
        <a href="#"><i class="fa fa-envelope"></i> Messages </a>
        <div class="sub-nav">
            <a href="#">Inbox </a>
            <a href="#">Important </a>
            <a href="#">Sent</a>
            <a href="#">Draft</a>
            <a href="#">Trash</a>
            <a href="#">All messages</a>
        </div>
        <a href="#"><i class="fa fa-dribbble"></i> Dribbble Invite</a>
        <div class="sub-nav">
            <a href="#">Inbox </a>
            <a href="#">Important </a>
            <a href="#">Sent</a>
            <a href="#">Draft</a>
            <a href="#">Trash</a>
            <a href="#">All messages</a>
        </div>
    </div>
</div>
<div style="height: 3000px; background-color: #9fc9e5"></div>

2
  • Как закрепить?? Объясните подробно что вы хотите.
    – user245150
    10 авг 2017 в 12:25
  • есть два скроллбара у ленты и у меню. Пока мышка над меню, не позволять голубому блоку скроллиться. Например, я докручу скроллбар меню до конца и у меня начинает крутиться лента.
    – Isin Min
    11 авг 2017 в 6:49

2 ответа 2

1

Накопал свою наработку, здесь у ленты высота 100% от высоты body и overflow hidden самое главное что лента не связана с меню тем самым при конце скролла меню лента скроллится не будет.

body {
margin:0;
overflow:hidden;
}
aside.menu {
height:100vh;
float:left;
overflow:auto;
font-family:sans-serif;
}
aside.menu ul {
margin:0;
padding:0;
list-style-type:none;
}
aside.menu ul li {
padding:10px 60px;
background:#0af;
color:white;
border-bottom:1px solid #08a;
}
section.body {
height:100vh;
overflow:auto;
}
::-webkit-scrollbar {
    width: 0.5em;
   
}
::-webkit-scrollbar-track {
    background:none;
}
::-webkit-scrollbar-thumb {
  background-color: gray;
  
  border-radius:10px;
  
}
<aside class="menu">
  <ul>
    <li>List 1
    <li>List 2
    <li>List 3
    <li>List 4
    <li>List 5
    <li>List 6
    <li>List 7
    <li>List 8
    <li>List 1
    <li>List 2
    <li>List 3
    <li>List 4
    <li>List 5
    <li>List 6
    <li>List 7
    <li>List 8
    <li>List 1
    <li>List 2
    <li>List 3
    <li>List 4
    <li>List 5
    <li>List 6
    <li>List 7
    <li>List 8
  </ul>
</aside>
<section class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non lectus volutpat, iaculis dui non, porta mi. Aliquam interdum turpis id orci elementum, a rhoncus tortor dictum. Aliquam erat volutpat. Ut scelerisque dolor odio, et pulvinar tellus gravida vitae. Curabitur euismod pellentesque tempus. Etiam maximus massa non felis rhoncus cursus. In ullamcorper sem a nulla malesuada, eget egestas tellus rutrum. In ut purus placerat lectus gravida ultricies.

Curabitur imperdiet, ipsum a sollicitudin tristique, orci lacus pellentesque leo, at ultricies libero dolor in lectus. Ut porta egestas metus. Nam hendrerit urna mattis nisi consectetur lacinia. Phasellus fringilla, dui ut eleifend mollis, urna tellus viverra nisl, nec varius odio odio et velit. Sed lacus lorem, imperdiet at enim at, facilisis viverra nulla. In at urna ac mauris commodo convallis eu posuere enim. Donec eget est ultricies, placerat risus at, ultricies quam. Cras cursus, mauris vel lobortis auctor, lacus ex aliquam dui, eu commodo massa magna a mauris. Nunc id mi consectetur nulla rutrum blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla lacinia, lacus et feugiat condimentum, eros nulla lobortis lacus, ac mattis erat purus eget ante. Aenean egestas a felis mollis suscipit. Ut at posuere ante.

Aliquam porttitor egestas massa sed posuere. Nunc condimentum ultrices mauris, vel euismod dui. Nulla eu rhoncus leo. Sed eget magna lectus. Morbi efficitur urna metus, eleifend aliquet enim semper non. Sed aliquet diam dolor, ac iaculis ante pretium sit amet. Nullam condimentum metus ac tellus tincidunt, sed consectetur odio pharetra. Nunc varius, nisi quis consequat porttitor, erat massa maximus velit, non placerat dui risus eget tortor. Aliquam faucibus velit vel arcu suscipit, et fermentum dolor vestibulum. Vestibulum tincidunt ipsum orci, nec viverra mi ornare id. Pellentesque in ex convallis, rutrum sapien eu, imperdiet diam. Mauris accumsan diam et lectus fermentum accumsan. Sed finibus nibh luctus, congue sem maximus, imperdiet nisl. Ut interdum, mauris non pretium hendrerit, sapien urna ullamcorper enim, vitae faucibus nisl nibh sit amet risus. Duis a posuere eros, a placerat metus. Nam ante libero, vestibulum sed leo eget, rhoncus mattis augue.

Curabitur vitae tellus a nisi cursus euismod eget eu velit. Fusce placerat condimentum quam, eget ornare libero imperdiet id. Sed fermentum nec tellus ac vestibulum. Sed pellentesque mauris a ante cursus tincidunt. Quisque consequat feugiat ullamcorper. Donec semper pharetra mi, sit amet ultricies nunc eleifend eget. Proin nec vulputate quam, a accumsan augue. Nam luctus semper est sodales varius. Nam nisi mauris, suscipit sit amet enim vel, consectetur suscipit risus.

Nam volutpat, elit in commodo ornare, enim dolor egestas nibh, ut aliquet lacus ex in ex. Sed vitae cursus risus. Vestibulum aliquam, risus nec interdum euismod, enim velit eleifend tortor, vitae blandit massa diam id eros. Quisque sodales eleifend sodales. Aenean magna quam, efficitur eu nulla sit amet, maximus facilisis leo. Pellentesque sem sem, interdum in accumsan at, volutpat et elit. Nunc id turpis quis libero dignissim placerat. Praesent auctor pharetra lacus sed sagittis. Quisque nec luctus ex, et dictum sapien. Nam mollis elit eget arcu dapibus ultrices. Quisque sodales iaculis ex, vitae convallis ligula sodales eu. Nullam sed lobortis justo, eu accumsan ligula. Phasellus sit amet nulla quis mi eleifend pharetra pellentesque id felis. Nunc mollis nulla a rutrum hendrerit. Maecenas interdum velit non mauris tempor, dictum varius purus tempus.</section>

-1

body добавь ---- overflow: hidden;

а блокам которые должны скролиться ------ overflow-y: scroll;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.