I have a bootstrap collapse panel. In there I have placed toggle link bottom of the content so it will go down and up when click that link.
The problem
I have a long list of content. I need to move users to top when they click toggle. But in here, when I expand the menu and click collapse, it will go all the way to bottom of the page. Instead of I need to move users to the top of the page. I tried to set offset top but no luck.
Any idea?
My Jquery
$('html,body').animate({
scrollTop: $(".collapsed").offset().top
},500);
jsfiddle
if I correctly understood, you need to scroll top when collapse area is hidden, try to use this. The collapse has hide.bs.collapse event that fires immediately when the hide method has been called, default interval for the collapse is 350ms, as you won't see the end of your site, scroll interval should be less than the default.
Sorry for my bad english...
Update
I re-read all comments, your problem is that you try to scroll to toggle button instead collapse area, you scroll to the button when area not closed and it is on the bottom, just scroll to panel-collapse....
$(document).ready(function() {
$('.panel-collapse').on('hide.bs.collapse show.bs.collapse', function(e) {
$('html, body').animate({
scrollTop: $(e.target).offset().top - 20
}, 150);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<p>Cras eleifend feugiat lectus ac lobortis. Ut vestibulum nulla odio, ut vulputate urna euismod et. Duis elementum nulla quis nulla fringilla dignissim. Fusce vitae turpis leo. Integer tincidunt sapien id sem feugiat, et vulputate dolor varius. Sed et pharetra orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>
Proin ac ultrices tellus, vel scelerisque tellus. Donec porttitor pharetra congue. Donec ultrices ligula in felis varius, in maximus nibh ornare. Sed augue felis, interdum in cursus ornare, porta rutrum turpis. Aliquam rutrum massa id dui cursus, non imperdiet ligula viverra. In convallis placerat lectus, at sollicitudin lectus interdum vitae. Proin cursus tempor eros, eget ultrices nisi feugiat at. Praesent scelerisque felis id nisi tempus aliquet. Vivamus vehicula, augue at ultricies viverra, arcu quam pretium lectus, nec accumsan est dolor vel quam. Aenean scelerisque sodales libero, at elementum lorem mollis id.
</p>
<p>Mauris vel laoreet ante. Maecenas ut gravida tellus, eu egestas nisi. Nam elementum lacus nec odio ultrices, quis viverra massa congue. Nunc rutrum orci ac luctus aliquam. Vivamus et lorem laoreet erat condimentum feugiat imperdiet ac orci. Praesent faucibus lacus et nibh vestibulum dapibus vitae maximus lorem. Donec vulputate, sem vel posuere dictum, arcu lacus faucibus ante, sit amet luctus nulla nisi eu diam. Phasellus sit amet augue eu nisi auctor tincidunt. Vivamus tristique sem dignissim risus interdum, vel commodo tellus maximus. Vestibulum scelerisque mi finibus nibh sollicitudin sollicitudin. Sed porttitor diam tortor, id vestibulum neque vulputate semper. Cras scelerisque laoreet diam viverra rutrum. Vivamus a imperdiet tellus. Etiam aliquet eros luctus auctor condimentum. Nulla lacinia est sit amet vulputate fringilla. Phasellus fringilla nulla lectus.</p>
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
</div>
<div class="panel panel-default" id="panel1">
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<p>Cras eleifend feugiat lectus ac lobortis. Ut vestibulum nulla odio, ut vulputate urna euismod et. Duis elementum nulla quis nulla fringilla dignissim. Fusce vitae turpis leo. Integer tincidunt sapien id sem feugiat, et vulputate dolor varius. Sed et pharetra orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>
Proin ac ultrices tellus, vel scelerisque tellus. Donec porttitor pharetra congue. Donec ultrices ligula in felis varius, in maximus nibh ornare. Sed augue felis, interdum in cursus ornare, porta rutrum turpis. Aliquam rutrum massa id dui cursus, non imperdiet ligula viverra. In convallis placerat lectus, at sollicitudin lectus interdum vitae. Proin cursus tempor eros, eget ultrices nisi feugiat at. Praesent scelerisque felis id nisi tempus aliquet. Vivamus vehicula, augue at ultricies viverra, arcu quam pretium lectus, nec accumsan est dolor vel quam. Aenean scelerisque sodales libero, at elementum lorem mollis id.
</p>
<p>Mauris vel laoreet ante. Maecenas ut gravida tellus, eu egestas nisi. Nam elementum lacus nec odio ultrices, quis viverra massa congue. Nunc rutrum orci ac luctus aliquam. Vivamus et lorem laoreet erat condimentum feugiat imperdiet ac orci. Praesent faucibus lacus et nibh vestibulum dapibus vitae maximus lorem. Donec vulputate, sem vel posuere dictum, arcu lacus faucibus ante, sit amet luctus nulla nisi eu diam. Phasellus sit amet augue eu nisi auctor tincidunt. Vivamus tristique sem dignissim risus interdum, vel commodo tellus maximus. Vestibulum scelerisque mi finibus nibh sollicitudin sollicitudin. Sed porttitor diam tortor, id vestibulum neque vulputate semper. Cras scelerisque laoreet diam viverra rutrum. Vivamus a imperdiet tellus. Etiam aliquet eros luctus auctor condimentum. Nulla lacinia est sit amet vulputate fringilla. Phasellus fringilla nulla lectus.</p>
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #1
</a>
</h4>
</div>
</div>
<div class="panel panel-default" id="panel1">
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<p>Cras eleifend feugiat lectus ac lobortis. Ut vestibulum nulla odio, ut vulputate urna euismod et. Duis elementum nulla quis nulla fringilla dignissim. Fusce vitae turpis leo. Integer tincidunt sapien id sem feugiat, et vulputate dolor varius. Sed et pharetra orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>
Proin ac ultrices tellus, vel scelerisque tellus. Donec porttitor pharetra congue. Donec ultrices ligula in felis varius, in maximus nibh ornare. Sed augue felis, interdum in cursus ornare, porta rutrum turpis. Aliquam rutrum massa id dui cursus, non imperdiet ligula viverra. In convallis placerat lectus, at sollicitudin lectus interdum vitae. Proin cursus tempor eros, eget ultrices nisi feugiat at. Praesent scelerisque felis id nisi tempus aliquet. Vivamus vehicula, augue at ultricies viverra, arcu quam pretium lectus, nec accumsan est dolor vel quam. Aenean scelerisque sodales libero, at elementum lorem mollis id.
</p>
<p>Mauris vel laoreet ante. Maecenas ut gravida tellus, eu egestas nisi. Nam elementum lacus nec odio ultrices, quis viverra massa congue. Nunc rutrum orci ac luctus aliquam. Vivamus et lorem laoreet erat condimentum feugiat imperdiet ac orci. Praesent faucibus lacus et nibh vestibulum dapibus vitae maximus lorem. Donec vulputate, sem vel posuere dictum, arcu lacus faucibus ante, sit amet luctus nulla nisi eu diam. Phasellus sit amet augue eu nisi auctor tincidunt. Vivamus tristique sem dignissim risus interdum, vel commodo tellus maximus. Vestibulum scelerisque mi finibus nibh sollicitudin sollicitudin. Sed porttitor diam tortor, id vestibulum neque vulputate semper. Cras scelerisque laoreet diam viverra rutrum. Vivamus a imperdiet tellus. Etiam aliquet eros luctus auctor condimentum. Nulla lacinia est sit amet vulputate fringilla. Phasellus fringilla nulla lectus.</p>
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #1
</a>
</h4>
</div>
</div>
</div>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in elementum sapien. Etiam non tellus ut diam sagittis ultricies. Sed ornare quis ex ut ornare. Duis at fermentum purus, et ultricies ex. Sed id porta metus. Nunc posuere, ex at maximus ullamcorper, arcu orci tempus justo, id efficitur massa erat et ipsum. Maecenas pharetra et est quis varius. Donec id tincidunt erat, ac bibendum lorem. Fusce pellentesque, leo ac molestie lacinia, neque leo elementum velit, vitae porta lectus justo quis nisi. Cras quis sem accumsan, faucibus ligula in, vehicula erat. Maecenas semper eros ultrices sem ultrices, a po</p>
</div>
<!-- dib -->
<div class="col-md-6 col-sm-6 col-xs-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in elementum sapien. Etiam non tellus ut diam sagittis ultricies. Sed ornare quis ex ut ornare. Duis at fermentum purus, et ultricies ex. Sed id porta metus. Nunc posuere, ex at maximus ullamcorper, arcu orci tempus justo, id efficitur massa erat et ipsum. Maecenas pharetra et est quis varius. Donec id tincidunt erat, ac bibendum lorem. Fusce pellentesque, leo ac molestie lacinia, neque leo elementum velit, vitae porta lectus justo quis nisi. Cras quis sem accumsan, faucibus ligula in, vehicula erat. Maecenas semper eros ultrices sem ultrices, a posuere urna posuere.</p>
</div>
</div>
<br><br><br><br><br><br><br><br>
<!-- roew -->
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in elementum sapien. Etiam non tellus ut diam sagittis ultricies. Sed ornare quis ex ut ornare. Duis at fermentum purus, et ultricies ex. Sed id porta metus. Nunc posuere, ex at maximus ullamcorper, arcu orci tempus justo, id efficitur massa erat et ipsum. Maecenas pharetra et est quis varius. Donec id tincidunt erat, ac bibendum lorem. Fusce pellentesque, leo ac molestie lacinia, neque leo elementum velit, vitae porta lectus justo quis nisi. Cras quis sem accumsan, faucibus ligula in, vehicula erat. Maecenas semper eros ultrices sem ultrices, a posuere urna posuere.</p>
</div>
</div>
</div>
You can achieve the scrolling by attaching an event-listener to the toggle-element and then checking the classes of the pannel-collapse element.
$('#accordion .panel-heading a').on('click', function (event) {
let panelCollapse = $(this).closest('.panel').find('.panel-collapse');
if (!panelCollapse.hasClass('collapse')) {
$('html, body').animate({
scrollTop: panelCollapse.offset().top
}, 500);
}
});
Related
I am trying to create a layout with a sidebar container and a content container where both of them are overflowing and when you scroll the page it scrolls both of the containers simultaneously. The sidebar should snap to the top/bottom of the screen when you scroll. Its a bit hard to explain but its implemented on this page perfectly:
https://www.kiwi.com/sv/sok/results/lulea-sverige/stockholm-sverige
What is the best way to implement this? I am trying to create states for the sidebar top | middle | bottom where middle is relative and top and bottom are fixed. Trying to use intersection API & the scroll event to detect which state we're in. But I'm not sure using scroll event is optimal because of performance.
Here is my attempt at implementing it:
https://codesandbox.io/s/vue-2-playground-forked-wsm9gd?file=/src/components/SidebarAndContent.vue
Its not working great and I would love some input on the best way to do this. Thanks!
this suppose to solve you problem if i get it correctly`
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 160px; /* Same as the width of the sidenav */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<body>
<div class="sidenav">
About
Services
Clients
Contact
</div>
<div class="main">
<h2>Sidebar</h2>
<p>This sidebar is of full height (100%) and always shown.</p>
<p>Scroll down the page to see the result.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
`
I solved it here:
https://codesandbox.io/s/vue-2-playground-forked-pkh2hr?file=/src/components/SidebarAndContent.vue
SidebarAndContent.vue:
<template>
<div>
<div id="sidebar" :class="sideBarFixed ? 'fixed' : ''" :style="[{ top: `${sideBarTop}px` }]">
<h1>Sidebar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget tellus non tortor laoreet euismod. Nunc mattis
fermentum aliquet. Donec elementum sagittis suscipit. Morbi vitae quam est. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Proin at tellus vitae nisl aliquet eleifend eget
vehicula tortor. In tristique volutpat ante, at rhoncus felis scelerisque eu. Sed eros dolor, ultrices vitae
tincidunt ac, dignissim in tellus. Nulla blandit cursus eros, non tincidunt velit sollicitudin mollis. Phasellus
tellus velit, faucibus vel faucibus ut, luctus at mauris. Nunc in lacinia nibh.</p>
<p>Proin a ipsum quis leo mattis molestie. Pellentesque nunc dui, dictum ut semper et, vestibulum ut diam.
Suspendisse volutpat suscipit mi, quis lacinia elit egestas a. Vestibulum id rhoncus massa. Nunc sed elit eu
mauris vulputate ultricies. Proin pulvinar ipsum ut nisl ullamcorper dictum. Donec sit amet dolor ipsum.
Pellentesque facilisis, metus dignissim porttitor mollis, nunc metus convallis felis, vel dictum urna justo sit
amet diam. Aenean pellentesque scelerisque nunc quis condimentum. Cras sed mauris at magna cursus tristique.</p>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget tellus non tortor laoreet euismod. Nunc mattis
fermentum aliquet. Donec elementum sagittis suscipit. Morbi vitae quam est. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Proin at tellus vitae nisl aliquet eleifend eget
vehicula tortor. In tristique volutpat ante, at rhoncus felis scelerisque eu. Sed eros dolor, ultrices vitae
tincidunt ac, dignissim in tellus. Nulla blandit cursus eros, non tincidunt velit sollicitudin mollis. Phasellus
tellus velit, faucibus vel faucibus ut, luctus at mauris. Nunc in lacinia nibh.</p>
<p>Proin a ipsum quis leo mattis molestie. Pellentesque nunc dui, dictum ut semper et, vestibulum ut diam.
Suspendisse volutpat suscipit mi, quis lacinia elit egestas a. Vestibulum id rhoncus massa. Nunc sed elit eu
mauris vulputate ultricies. Proin pulvinar ipsum ut nisl ullamcorper dictum. Donec sit amet dolor ipsum.
Pellentesque facilisis, metus dignissim porttitor mollis, nunc metus convallis felis, vel dictum urna justo sit
amet diam. Aenean pellentesque scelerisque nunc quis condimentum. Cras sed mauris at magna cursus tristique.</p>
<p>Nunc arcu mi, placerat vitae condimentum dapibus, volutpat quis libero. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Nulla varius erat vel dolor dictum
vestibulum. Quisque adipiscing tincidunt nulla, sed sagittis risus imperdiet sit amet. Donec ultrices tristique
adipiscing. Ut iaculis volutpat mauris. Proin bibendum, diam vel venenatis posuere, felis orci venenatis tortor,
vel egestas nisl tellus accumsan elit. Nullam feugiat odio purus, sed bibendum est. Donec gravida magna sit amet
libero tincidunt ullamcorper.</p>
<p>Nulla facilisi. Ut porttitor semper condimentum. Integer luctus varius nisi, ac condimentum sapien auctor
volutpat. Cras molestie consectetur libero. Phasellus risus urna, imperdiet non porttitor eget, adipiscing
adipiscing magna. Nam semper, felis a condimentum viverra, massa ante varius odio, quis pretium enim neque quis
libero. Nulla massa dolor, imperdiet sed molestie semper, adipiscing at est. Etiam eget quam sed orci vestibulum
ullamcorper. Donec mi sapien, adipiscing in eleifend a, tempor vel velit.</p>
<p>Proin nec suscipit nibh. Nulla varius purus et dolor pellentesque ullamcorper. Vestibulum blandit quam et
sapien lobortis blandit. Nulla eu eros lacus, et mattis magna. In lobortis luctus varius. Maecenas in purus
odio, quis porttitor felis. Sed id nisi massa, sit amet placerat magna. Curabitur imperdiet hendrerit imperdiet.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus lobortis nunc sit
amet eros vulputate ac eleifend elit convallis. Quisque commodo erat quis enim tincidunt ac lacinia urna
pretium. Curabitur luctus leo nec turpis sagittis ut porta dui blandit.</p>
<p>Nunc arcu mi, placerat vitae condimentum dapibus, volutpat quis libero. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Nulla varius erat vel dolor dictum
vestibulum. Quisque adipiscing tincidunt nulla, sed sagittis risus imperdiet sit amet. Donec ultrices tristique
adipiscing. Ut iaculis volutpat mauris. Proin bibendum, diam vel venenatis posuere, felis orci venenatis tortor,
vel egestas nisl tellus accumsan elit. Nullam feugiat odio purus, sed bibendum est. Donec gravida magna sit amet
libero tincidunt ullamcorper.</p>
<p>Nulla facilisi. Ut porttitor semper condimentum. Integer luctus varius nisi, ac condimentum sapien auctor
volutpat. Cras molestie consectetur libero. Phasellus risus urna, imperdiet non porttitor eget, adipiscing
adipiscing magna. Nam semper, felis a condimentum viverra, massa ante varius odio, quis pretium enim neque quis
libero. Nulla massa dolor, imperdiet sed molestie semper, adipiscing at est. Etiam eget quam sed orci vestibulum
ullamcorper. Donec mi sapien, adipiscing in eleifend a, tempor vel velit.</p>
<p>Proin nec suscipit nibh. Nulla varius purus et dolor pellentesque ullamcorper. Vestibulum blandit quam et
sapien lobortis blandit. Nulla eu eros lacus, et mattis magna. In lobortis luctus varius. Maecenas in purus
odio, quis porttitor felis. Sed id nisi massa, sit amet placerat magna. Curabitur imperdiet hendrerit imperdiet.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus lobortis nunc sit
amet eros vulputate ac eleifend elit convallis. Quisque commodo erat quis enim tincidunt ac lacinia urna
pretium. Curabitur luctus leo nec turpis sagittis ut porta dui blandit.</p>
<p>Nunc arcu mi, placerat vitae condimentum dapibus, volutpat quis libero. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Nulla varius erat vel dolor dictum
vestibulum. Quisque adipiscing tincidunt nulla, sed sagittis risus imperdiet sit amet. Donec ultrices tristique
adipiscing. Ut iaculis volutpat mauris. Proin bibendum, diam vel venenatis posuere, felis orci venenatis tortor,
vel egestas nisl tellus accumsan elit. Nullam feugiat odio purus, sed bibendum est. Donec gravida magna sit amet
libero tincidunt ullamcorper.</p>
<p>Nulla facilisi. Ut porttitor semper condimentum. Integer luctus varius nisi, ac condimentum sapien auctor
volutpat. Cras molestie consectetur libero. Phasellus risus urna, imperdiet non porttitor eget, adipiscing
adipiscing magna. Nam semper, felis a condimentum viverra, massa ante varius odio, quis pretium enim neque quis
libero. Nulla massa dolor, imperdiet sed molestie semper, adipiscing at est. Etiam eget quam sed orci vestibulum
ullamcorper. Donec mi sapien, adipiscing in eleifend a, tempor vel velit.</p>
<p>Proin nec suscipit nibh. Nulla varius purus et dolor pellentesque ullamcorper. Vestibulum blandit quam et
sapien lobortis blandit. Nulla eu eros lacus, et mattis magna. In lobortis luctus varius. Maecenas in purus
odio, quis porttitor felis. Sed id nisi massa, sit amet placerat magna. Curabitur imperdiet hendrerit imperdiet.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus lobortis nunc sit
amet eros vulputate ac eleifend elit convallis. Quisque commodo erat quis enim tincidunt ac lacinia urna
pretium. Curabitur luctus leo nec turpis sagittis ut porta dui blandit.</p>
<p>Proin nec suscipit nibh. Nulla varius purus et dolor pellentesque ullamcorper. Vestibulum blandit quam et
sapien lobortis blandit. Nulla eu eros lacus, et mattis magna. In lobortis luctus varius. Maecenas in purus
odio, quis porttitor felis. Sed id nisi massa, sit amet placerat magna. Curabitur imperdiet hendrerit imperdiet.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus lobortis nunc sit
amet eros vulputate ac eleifend elit convallis. Quisque commodo erat quis enim tincidunt ac lacinia urna
pretium. Curabitur luctus leo nec turpis sagittis ut porta dui blandit.</p>
<p>Nunc arcu mi, placerat vitae condimentum dapibus, volutpat quis libero. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Nulla varius erat vel dolor dictum
vestibulum. Quisque adipiscing tincidunt nulla, sed sagittis risus imperdiet sit amet. Donec ultrices tristique
adipiscing. Ut iaculis volutpat mauris. Proin bibendum, diam vel venenatis posuere, felis orci venenatis tortor,
vel egestas nisl tellus accumsan elit. Nullam feugiat odio purus, sed bibendum est. Donec gravida magna sit amet
libero tincidunt ullamcorper.</p>
<p>Nulla facilisi. Ut porttitor semper condimentum. Integer luctus varius nisi, ac condimentum sapien auctor
volutpat. Cras molestie consectetur libero. Phasellus risus urna, imperdiet non porttitor eget, adipiscing
adipiscing magna. Nam semper, felis a condimentum viverra, massa ante varius odio, quis pretium enim neque quis
libero. Nulla massa dolor, imperdiet sed molestie semper, adipiscing at est. Etiam eget quam sed orci vestibulum
ullamcorper. Donec mi sapien, adipiscing in eleifend a, tempor vel velit.</p>
<p>Proin nec su scipit nibh. Nulla varius purus et dolor pellentesque ullamcorper. Vestibulum blandit quam et
sapien lobortis blandit. Nulla eu eros lacus, et mattis magna. In lobortis luctus varius. Maecenas in purus
odio, quis porttitor felis. Sed id nisi massa, sit amet placerat magna. Curabitur imperdiet hendrerit imperdiet.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus lobortis nunc sit
amet eros vulputate ac eleifend elit convallis. Quisque commodo erat quis enim tincidunt ac lacinia urna
pretium. Curabitur luctus leo nec turpis sagittis ut porta dui blandit.</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
test: "hej",
window: null,
lastScrollTop: null,
wasScrollingDown: true,
sidebar: null,
initialSidebarTop: 0,
sideBarFixed: false,
sideBarTop: 0,
};
},
methods: {
handleScroll() {
const windowHeight = window.innerHeight;
const sidebar = document.querySelector('#sidebar');
const sidebarHeight = sidebar.offsetHeight;
var doc = document.documentElement;
var scrollTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
var scrollBottom = scrollTop + windowHeight;
var sidebarTop = scrollTop + this.sideBarTop;
var sidebarBottom = sidebarTop + sidebarHeight;
var heightDelta = Math.abs(windowHeight - sidebarHeight);
var scrollDelta = this.lastScrollTop - scrollTop;
var isScrollingDown = (scrollTop > this.lastScrollTop);
var isWindowLarger = (windowHeight > sidebarHeight);
if ((isWindowLarger && scrollTop > this.initialSidebarTop) || (!isWindowLarger && scrollTop > this.initialSidebarTop + heightDelta)) {
this.sideBarFixed = true;
} else if (!isScrollingDown && scrollTop <= this.initialSidebarTop) {
this.sideBarFixed = false;
}
var dragBottomDown = (sidebarBottom <= scrollBottom && isScrollingDown);
var dragTopUp = (sidebarTop >= scrollTop && !isScrollingDown);
if (dragBottomDown) {
if (isWindowLarger) {
this.sideBarTop = 0
} else {
this.sideBarTop = (-heightDelta)
}
} else if (dragTopUp) {
this.sideBarTop = 0
} else if (this.sideBarFixed) {
var currentTop = parseInt(this.sideBarTop, 10);
var minTop = -heightDelta;
var scrolledTop = currentTop + scrollDelta;
var isPageAtBottom = (scrollTop + windowHeight >= document.body.offsetHeight);
var newTop = (isPageAtBottom) ? minTop : scrolledTop;
this.sideBarTop = newTop;
}
this.lastScrollTop = scrollTop;
this.wasScrollingDown = isScrollingDown;
},
},
mounted() {
this.lastScrollTop = window.scrollY;
this.wasScrollingDown = true;
const sidebar = document.querySelector('#sidebar');
if (sidebar) {
this.initialSidebarTop = sidebar.offsetTop;
window.addEventListener('scroll', this.handleScroll);
}
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll);
},
};
</script>
<style scoped>
* {
margin: 0;
padding: 0;
}
header {
height: 100px;
background-color: blue;
}
#content {
padding-right: 200px;
background: green;
}
#sidebar {
width: 180px;
padding: 10px;
background: red;
float: left;
}
.fixed {
position: fixed;
}
</style>
In the below snippet, there is a block of large text and a block of small text. How would I go about making the small text "hug" the big text?
<p style="float: left;margin: 0px;font-size: 300%;max-width: 15rem;">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque pharetra velit, sed pretium mauris consectetur quis. Donec ut dolor id ipsum bibendum egestas id eu est. Fusce egestas hendrerit neque et laoreet. Etiam tempus, sem in consectetur gravida, sapien enim accumsan tortor, non molestie ipsum ex vel nulla. Vivamus a nisi commodo, hendrerit augue vel, pulvinar sapien. Morbi lobortis, velit feugiat gravida venenatis, lorem magna fringilla lacus, ac posuere velit mi eget ex. Nam iaculis pellentesque ullamcorper. Vestibulum condimentum efficitur urna eget semper. Nam velit velit, vulputate at justo sed, sollicitudin efficitur sapien.
<br>
Curabitur egestas orci et vulputate mattis. Nunc vehicula semper porta. Pellentesque mattis magna felis, vitae rutrum quam condimentum vel. Morbi hendrerit suscipit purus. Proin ullamcorper nec est a iaculis. Nullam et lacus odio. Morbi ut tortor feugiat, volutpat nisl maximus, aliquam libero.
<br>
Fusce iaculis enim elit, in commodo nisl feugiat at. Integer mauris mauris, finibus quis tempus et, euismod et lorem. Morbi finibus urna orci, ac vehicula enim luctus at. Maecenas blandit posuere nisi eget commodo. Maecenas quis turpis porttitor, fringilla nisi non, interdum diam. Nunc ipsum enim, lobortis sit amet velit elementum, maximus pretium erat. Ut sollicitudin urna quis felis molestie suscipit. Fusce ultrices eleifend velit, eu aliquam libero pharetra id. Nulla suscipit in purus sit amet tincidunt.
<br>
Suspendisse nec porttitor erat. Nam nulla ex, mattis rhoncus semper ut, malesuada quis mauris. Cras fringilla accumsan ligula scelerisque pharetra. Vivamus luctus, magna a rhoncus posuere, nisi neque fringilla risus, id maximus elit sapien at libero. Morbi lectus nulla, hendrerit at tortor sed, aliquam dapibus elit. Aenean sodales, neque in convallis rhoncus, nisl neque commodo nisi, a bibendum justo mi at libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam commodo, est a ornare sagittis, massa odio porttitor enim, in dignissim ipsum massa sed diam. Nunc scelerisque lorem nec lacus mattis auctor. In eu arcu id dui convallis ultricies. Maecenas viverra condimentum velit. Integer posuere ipsum ut ante aliquet, euismod bibendum augue gravida. Sed ultrices aliquam faucibus. Aenean vel mauris ac tellus euismod fringilla. Aliquam lobortis molestie ipsum, at imperdiet leo scelerisque id.
</p>
I am willing to be as hacky as possible.
Is this what you mean? Does this help?
<style>
.float_txt {
position: fixed;
margin: 0px;
font-size: 300%;
max-width: 15rem;
}
.main_cnt {
padding-left: 240px;
}
</style>
<p class="float_txt">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
<p class="main_cnt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque pharetra velit, sed pretium mauris consectetur quis. Donec ut dolor id ipsum bibendum egestas id eu est. Fusce egestas hendrerit neque et laoreet. Etiam tempus, sem in consectetur gravida, sapien enim accumsan tortor, non molestie ipsum ex vel nulla. Vivamus a nisi commodo, hendrerit augue vel, pulvinar sapien. Morbi lobortis, velit feugiat gravida venenatis, lorem magna fringilla lacus, ac posuere velit mi eget ex. Nam iaculis pellentesque ullamcorper. Vestibulum condimentum efficitur urna eget semper. Nam velit velit, vulputate at justo sed, sollicitudin efficitur sapien.
<br>
Curabitur egestas orci et vulputate mattis. Nunc vehicula semper porta. Pellentesque mattis magna felis, vitae rutrum quam condimentum vel. Morbi hendrerit suscipit purus. Proin ullamcorper nec est a iaculis. Nullam et lacus odio. Morbi ut tortor feugiat, volutpat nisl maximus, aliquam libero.
<br>
Fusce iaculis enim elit, in commodo nisl feugiat at. Integer mauris mauris, finibus quis tempus et, euismod et lorem. Morbi finibus urna orci, ac vehicula enim luctus at. Maecenas blandit posuere nisi eget commodo. Maecenas quis turpis porttitor, fringilla nisi non, interdum diam. Nunc ipsum enim, lobortis sit amet velit elementum, maximus pretium erat. Ut sollicitudin urna quis felis molestie suscipit. Fusce ultrices eleifend velit, eu aliquam libero pharetra id. Nulla suscipit in purus sit amet tincidunt.
<br>
Suspendisse nec porttitor erat. Nam nulla ex, mattis rhoncus semper ut, malesuada quis mauris. Cras fringilla accumsan ligula scelerisque pharetra. Vivamus luctus, magna a rhoncus posuere, nisi neque fringilla risus, id maximus elit sapien at libero. Morbi lectus nulla, hendrerit at tortor sed, aliquam dapibus elit. Aenean sodales, neque in convallis rhoncus, nisl neque commodo nisi, a bibendum justo mi at libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam commodo, est a ornare sagittis, massa odio porttitor enim, in dignissim ipsum massa sed diam. Nunc scelerisque lorem nec lacus mattis auctor. In eu arcu id dui convallis ultricies. Maecenas viverra condimentum velit. Integer posuere ipsum ut ante aliquet, euismod bibendum augue gravida. Sed ultrices aliquam faucibus. Aenean vel mauris ac tellus euismod fringilla. Aliquam lobortis molestie ipsum, at imperdiet leo scelerisque id.
</p>
<!-- Spacing to show effect -->
<div style="height:500px;"></div>
For simplicity, lets have two paragraphs
<p>Paragraph 1, on the left</p>
<p>Paragraph 2, on the right</p>
The issue is, they are not next to each other yet.
By default, HTML makes the paragraph as wide as the screen. We do not want that. We want that paragraph to only be part of screen and the other paragraph to fill the other side of the screen.
We can do this by giving both paragraphs a specific width. If we give each paragraph 50% of the width of the window, we have room to put them together.
<p style="width: 50%">Paragraph 1, on the left</p>
<p style="width: 50%">Paragraph 2, on the right</p>
But that doesn't work yet. Why? HTML automatically puts elements under one another..unless we tell them otherwise. Every element defaultly floats to the left...So lets just tell paragraph 2 to float: right;.
<p style="width: 50%">Paragraph 1, on the left</p>
<p style="width: 50%; float: right;">Paragraph 2, on the right</p>
Problem solved. If you want paragraph 1 to fill more of the screen, change the widths to add to 100%. p1's width could be 80% and p2's width could be 20% for example.
If this is solution works for you, please mark this as the accepted answer. Thank you.
I am trying to hover over a button and trigger a page scroll slowly. Not scroll to ID but slowly scroll the page on hover and to stop scrolling when Not hovered.
I’m not sure to understand your request, maybe you need something like that :
let elem = document.querySelector('#myElem');
let interval;
let maxScrollHeight = elem.scrollHeight - elem.clientHeight;
elem.addEventListener('mouseenter', function() {
interval = setInterval(function() {
elem.scroll(0, elem.scrollTop += 10);
// This part of code is for replay
if (elem.scrollTop >= maxScrollHeight) {
elem.scroll(0, 1);
}
}, 100);
});
elem.addEventListener('mouseleave', function() {
clearInterval(interval);
});
p {
max-height: 100px;
max-width: 100px;
overflow: scroll;
}
<p id="myElem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
A simple solution could be the use of a timer function with setTimeout() Method, using window.scroll function with behavior:'smooth' in the object argument.
var scrollStep=10,
scrollTimer=null
function scrollSlowly(yDisplacement){
if(scrollTimer!=null)clearTimeout(scrollTimer);
scrollTimer = setTimeout(function(){
window.scroll({
top:window.scrollY+yDisplacement,
left:0,
behavior: 'smooth'
})
scrollSlowly(yDisplacement)
}, 100);
}
document.getElementById('up').addEventListener('mouseenter',function(evt){
scrollSlowly(-scrollStep)
})
document.getElementById('up').addEventListener('mouseleave',function(evt){
if(scrollTimer!=null)clearTimeout(scrollTimer);
})
document.getElementById('down').addEventListener('mouseenter',function(evt){
scrollSlowly(scrollStep)
})
document.getElementById('down').addEventListener('mouseleave',function(evt){
if(scrollTimer!=null)clearTimeout(scrollTimer);
})
.toolbar{
position:fixed;
top:0.5em;
left:0.5em;
}
body{
padding:2em;
}
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a est sit amet nisi tempus feugiat at quis felis. Aenean sit amet pretium lectus, non faucibus tortor. Suspendisse potenti. Aenean posuere lorem in ultricies malesuada. Cras vulputate tincidunt augue, in vulputate lacus iaculis id. Vestibulum et neque sed quam vestibulum laoreet in eget nunc. Suspendisse potenti.
</p>
<p>
Suspendisse molestie pretium suscipit. Morbi vitae dictum neque. Nullam a purus eu tortor iaculis eleifend nec eget augue. Maecenas bibendum neque vitae felis tincidunt laoreet. Nunc faucibus ligula sed tellus luctus porttitor sed a leo. Vivamus feugiat bibendum neque in consectetur. Integer dignissim tristique augue sed fermentum. Curabitur id feugiat tortor.
</p>
<p>
Sed ligula massa, sollicitudin ac feugiat non, elementum in augue. Pellentesque vel nibh at erat lobortis volutpat. Nunc ex leo, pretium ut egestas sit amet, scelerisque eleifend dolor. Proin dictum, odio non semper viverra, leo leo cursus nunc, ac varius neque diam vitae metus. Quisque id mi convallis, lobortis massa eget, posuere dolor. Aliquam magna dolor, malesuada id ullamcorper vel, rutrum non orci. Fusce rutrum placerat risus, eget molestie massa malesuada et. Duis rhoncus vestibulum turpis. Nullam gravida id est at posuere. Sed vel cursus tortor, quis rutrum leo. Nulla id nibh quis tellus fringilla mattis quis vel lorem. Sed accumsan magna nunc, ut tempus leo venenatis in. Mauris semper tortor a viverra tempus.
Sed nec orci quis risus pellentesque ultricies sed in mi. Nam et mauris eros. Quisque in rhoncus justo, ac mattis nulla. Sed eget nibh nibh. Aenean nisl sapien, congue a purus posuere, pretium egestas sapien. Pellentesque tempus orci ut placerat luctus. Sed tincidunt, urna vel ornare fermentum, ligula mauris pulvinar tortor, ac convallis libero nibh convallis tortor.
</p>
<p>
Donec eget odio elit. Praesent viverra nisi magna, quis rhoncus enim pellentesque sit amet. Pellentesque sodales blandit mauris ac laoreet. Morbi pharetra pellentesque ex eu sodales. Morbi id tempus lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In nec tincidunt ex. Duis commodo nibh vel tincidunt aliquam. Etiam vel risus sed sem placerat auctor. Nulla porta sapien lorem, et molestie massa interdum ac.
</p>
<div class='toolbar'>
<button id='up'>Up</button><button id='down'>down</button>
</div>
</body>
I know there are many solutions to stopping an element from scrolling after a certain point using JQuery, but I'd like to do it with vanilla Javascript.
Basically, this is an element that fixes once you scroll down to it and I want it to stop being fixed at the bottom of the page so that it doesn't go under the footer, if that makes sense.
Here is my current Javascript:
var fixmeTop = $('#childWidth').offset().top; //get initial position
$(window).scroll(function() {
var currentScroll = $(window).scrollTop(); // get current position
if (currentScroll >= fixmeTop - 100) { // fix once scroll to or past element
var elementAdd = document.getElementById("childWidth");
elementAdd.classList.add("afix");
} else {
var elementRemove = document.getElementById("childWidth");
elementRemove.classList.remove("afix");
}
});
The CSS which fixes the element:
.afix {
position:fixed;
z-index;9999;
top:100px;
}
I tried getting #childWidth's distance from the bottom of the page and then adding a CSS class with position:absolute; once scrolled within a certain distance from the bottom of the page but the element just disappeared once I scrolled down to near the bottom.
I believe you are looking for position: sticky. This would be a pure CSS solution; no JS necessary:
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.HolyGrail-body {
display: flex;
flex: 1;
background-color: pink;
}
.HolyGrail-content {
flex: 1;
background-color: aqua;
}
.HolyGrail-nav, .HolyGrail-ads {
/* 12em is the width of the columns */
flex: 0 0 12em;
background-color: red;
}
.HolyGrail-nav {
/* put the nav on the left */
order: -1;
background-color: yellow;
}
header, footer { height: 100px; }
header { background-color: blue; }
footer { background-color: green; }
.nav-box-wrapper {
position: sticky;
top: 50px;
}
.nav-box {
background-color: magenta;
position: relative;
top: 100px;
}
<!-- https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/ -->
<div class="HolyGrail">
<header>…</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
<p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed
<p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices
<p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor
<p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
<p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed
<p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices
<p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor
<p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
<p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed
<p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices
<p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor
<p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
<p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed
<p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices
<p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor
<p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
<p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed
<p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices
<p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor
<p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
<p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed
<p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices
<p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor
<p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim diam vulputate ut pharetra sit amet aliquam id. Nisi scelerisque eu ultrices vitae auctor. In dictum non </p>
<p>consectetur a erat nam at lectus. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Diam phasellus vestibulum lorem sed. Tincidunt eget nullam non nisi est sit. Donec massa sapien faucibus et molestie ac feugiat sed
<p>Est velit egestas dui id ornare arcu odio ut sem. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Ut consequat semper viverra nam libero. Congue nisi vitae suscipit tellus mauris a diam. Interdum velit laoreet id donec ultrices
<p>tincidunt arcu. Morbi tincidunt ornare massa eget egestas. Feugiat in fermentum posuere urna nec tincidunt. Etiam dignissim diam quis enim. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Lacus luctus accumsan tortor
<p>posuere ac ut consequat semper viverra. Lobortis mattis aliquam faucibus purus in massa.</p>
</main>
<nav class="HolyGrail-nav">
<div class="nav-box-wrapper">
<div class="nav-box">
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
</ul>
</div>
</div>
</nav>
<aside class="HolyGrail-ads">…</aside>
</div>
<footer>…</footer>
</div>
Please excuse all the ugly lorem ipsum -- if you run this full screen you should be able to see it in action.
This was sort of quick slipshod together-- there might be better approaches, and you'd want to do plenty of browser testing. But the sticky position property would probably allow what you are describing without the need for any code outside your HTML and CSS.
I have main div with position: absolute. And fixed div.
Is it possible to scroll main div inside fixed div? Where once the scrolling has reached its end, it begins scrolling the parent.
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
.main {
position: relative;
overflow: auto;
}
.right {
position: fixed;
top: 10px;
right: 50%;
height:150px;
width: 30%;
background: yellow;
overflow: auto;
}
JSFIDDLE
Basically you want to know first if the user is scrolling up or down, we do this by setting an oldScroll variable at the beginning of the script (0) then again at the end of each scroll event. Then we compare oldScroll against the current scrolling position.
Then we check if the user has reached the end of the scrollable area. If they have, we move the scroll position back by one and set the scroll position for the parent forward or backward by a certain amount (in this example I use 20).
var oldScroll = 0;
document.getElementById('scroll').onscroll = function() {
if(this.scrollTop > oldScroll && this.scrollTop === this.scrollHeight - this.offsetHeight) {
this.scrollTop--;
this.parentNode.scrollTop = this.parentNode.scrollTop + 20;
} else if(this.scrollTop < oldScroll && this.scrollTop === 0) {
this.scrollTop++;
this.parentNode.scrollTop = this.parentNode.scrollTop - 20;
}
oldScroll = this.scrollTop;
}
var oldScroll = 0;
document.getElementById('scroll').onscroll = function() {
if(this.scrollTop > oldScroll && this.scrollTop === this.scrollHeight - this.offsetHeight) {
this.scrollTop--;
this.parentNode.scrollTop = this.parentNode.scrollTop + 20;
} else if(this.scrollTop < oldScroll && this.scrollTop === 0) {
this.scrollTop++;
this.parentNode.scrollTop = this.parentNode.scrollTop - 20;
}
oldScroll = this.scrollTop;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
.main {
position: relative;
}
.right {
position: fixed;
top: 10px;
right: 50%;
height:150px;
width: 30%;
background: yellow;
overflow: auto;
z-index: 2;
}
<div class="container">
<div class="main">
Lorem ipsum dolor
Sit amet justo
Leo sed sed pulvinar et magna id eget condimentum laborum vel suspendisse. Porttitor mattis aenean. Accumsan sed adipiscing. Amet penatibus rutrum vitae vehicula viverra amet nibh semper nunc libero tincidunt massa vitae sagittis urna consectetuer magna a diam parturient. Nec nec dolor. Venenatis purus quis. In turpis in. Officiis hic mauris lorem wisi maecenas.
Velit sed eget donec placerat vestibulum
Orci id gravida per neque nibh. Nullam sit commodo tincidunt et diam vitae pharetra sed. Tempus sit sodales. Voluptatem wisi mattis inceptos tellus dolor rhoncus sed et eu turpis torquent ligula eu dui lorem nec accumsan platea lacinia ac. Non faucibus per sit in vehicula magna lacus deleniti. Tincidunt per aliquam. Vestibulum adipiscing laoreet eget eros commodo. Laoreet molestie a eros in nec sed justo venenatis. Eu lorem gravida. Nisl non a sociis convallis leo. Est nunc nisl porta dignissim turpis. Sapien sed nulla. Amet mi diam. Sem risus accumsan. Posuere viverra convallis. Est at netus. Tortor eget quam. Wisi nulla erat vestibulum tempor eu hendrerit vel dolor. Aliquam magnis sed etiam felis eros.
Scelerisque in justo neque ultricies vel eget libero quam vitae metus ante nonummy amet augue
Velit tellus enim. Vitae et ultrices. Odio torquent ligula. Quam in a scelerisque malesuada non. Sem enim congue sed odio libero. Lacinia commodo feugiat sed nonummy lobortis erat maecenas vivamus. Lectus diam pede. Eget risus mauris. In dapibus libero suspendisse pellentesque urna. Id metus libero. Metus id accumsan curabitur id congue. Elementum diam placerat posuere vivamus felis. Arcu ante vestibulum. Orci ut ut magna nibh eu aliquam mi qui vel pretium nullam. Tellus ligula malesuada. Consequat id nulla. Feugiat suscipit ligula dolor amet congue urna etiam amet accumsan consequat distinctio natoque placerat nec. Eget lectus mauris molestie fusce dui. Vel consectetuer imperdiet tempus at sed. Proin aliquam nec. Ligula sit elit eget faucibus cras arcu in rhoncus. Lorem id integer. Vestibulum nec cum. Ligula aliquam tellus elit nisl lectus in diam tortor wisi mauris tempus.
Fermentum ipsum augue. Lectus in nunc vulputate tellus neque tortor erat cursus. Congue wisi enim. Nam eget dui auctor amet quis donec ipsum nibh. Nisl leo magna officia leo nibh.
Mollis in ornare
Nec a ut. Ut nullam urna. Quis tortor mauris blandit non corrupti. Rutrum in at id dignissim dictum. Duis ac ornare parturient ultrices amet odio feugiat aenean cras mus pede. Praesent egestas netus. Urna esse pharetra commodi commodo curabitur. A lacinia sed etiam ut vel maxime platea porta odio mollis non nisl nulla nullam. Vitae impedit pulvinar.
Sem velit maiores
Accumsan blandit ut. Varius velit ante. Leo tincidunt nulla lorem gravida nulla tempus volutpat donec phasellus aliquet nec. Sapien tempor id pharetra magna mi. Nunc fusce venenatis nam mi nam. Eget senectus convallis donec urna suscipit donec natoque lacinia rutrum lorem est adipiscing sed lectus. Dictumst faucibus ut. Vulputate sodales ipsum. Purus vehicula sed vestibulum eget integer.
Ut turpis tempor integer fusce bibendum sem ipsum rutrum
Nec in nibh. A amet condimentum. Commodo fringilla amet sit ut quis. Facilisi ac a ut id morbi. Aut pretium orci donec dui vel risus eros amet quis ut molestiae. Molestie nulla sem vestibulum urna aptent aliquam etiam auctor. Erat eu duis. Imperdiet vestibulum ut. Nibh risus fusce viverra wisi lectus.
Sed curabitur ut vel condimentum fermentum a felis suspendisse
Neque lacus lorem ut massa lacinia. Amet nulla est. Vitae in vel turpis diam elit lacinia amet quis. Sem a in. Architecto magna sit vel vehicula elit ullam consectetuer non. Vel vulputate elit facilisis accumsan justo. Ridiculus pharetra fusce. A volutpat curabitur. Senectus amet in elementum ipsum ut sit eros tellus.
Phasellus enim metus vestibulum scelerisque mauris
Donec nisl massa. Hendrerit suscipit turpis sed eget quis. Mauris wisi aenean amet semper morbi. Orci hendrerit vestibulum dolor a semper nullam nesciunt amet.
Erat ac non. Accumsan arcu mauris. Consectetuer vivamus convallis. Vestibulum neque vitae risus vivamus ut. Egestas elit eget. Venenatis mattis orci. Malesuada eget massa vitae est nec lacus et parturient nunc enim curabitur mollis vitae dictumst et malesuada non amet wisi amet sit lacus cras quis accumsan tortor tempore vulputate ante. Corrupti est sem dignissim ante vehicula ac cursus in tempus suspendisse at. Neque pariatur sed. Ac malesuada a. Hac duis pellentesque. Libero varius fugiat. Iaculis aliquam ac eros tempus sit sit in fusce. Luctus wisi amet. Vestibulum est vitae ut libero massa. Eu hendrerit velit. Et per massa congue vivamus sapien. Nibh nibh pulvinar. Libero velit est. Et lorem ipsum. Pretium sagittis nisl. Id ut viverra. Arcu dis sapien vehicula amet lacus sodales sagittis quam minim in mauris integer ante eu. Nisl id id eget sed molestie nec ac mauris nonummy proin porttitor. Vestibulum orci a sed in ligula.
Lorem pede adipiscing massa eu eros
Proin a at. Sagittis congue vitae. Eu arcu sem. A pede cras volutpat faucibus dui. Est ridiculus vestibulum blandit a dui montes dignissim mauris ac tellus diam. Rutrum gravida orci id eget morbi. Nec ut mollis. Dolore nulla donec. Nunc accumsan consectetuer. Erat orci vel. Primis erat nostra nec laoreet tempor eos porttitor sem hendrerit dignissim venenatis faucibus vel pellentesque. Lobortis in mi vitae donec metus faucibus amet viverra at ut dolor varius felis ante blandit sit litora ac autem ante. Pellentesque pede quisque. In nonummy pulvinar. Eget nunc quam. Massa torquent ut penatibus hendrerit et nulla scelerisque odio dolor vitae quis. In in quam dolor nec arcu. Magna vitae feugiat. Donec fermentum bibendum.
Pretium dui dui
Convallis wisi urna. Ipsum tellus ultricies. Non ac pretium. In non accumsan purus nec aliquip hendrerit fusce ornare ut turpis quis dictum tincidunt in vestibulum fringilla ad. In et dui. Eget tellus quisque arcu varius per tellus neque sit convallis nulla tellus. Nam faucibus aliquam. Vitae vel sed turpis nascetur ultricies aliquam vitae ultricies sed lobortis vestibulum sapien non eu. Sem amet nulla. Leo elit ipsum imperdiet sit dictumst. Enim turpis vivamus. Posuere odio ipsum in augue quisque nisl duis metus. Etiam imperdiet curabitur. Quis velit arcu. Ipsum turpis libero vel donec et. Ac risus a tempus.
Cart Summary
Total
$0.00
</div>
<div class="right" id="scroll">
Lorem ipsum dolor
Sit amet justo
Leo sed sed pulvinar et magna id eget condimentum laborum vel suspendisse. Porttitor mattis aenean. Accumsan sed adipiscing. Amet penatibus rutrum vitae vehicula viverra amet nibh semper nunc libero tincidunt massa vitae sagittis urna consectetuer magna a diam parturient. Nec nec dolor. Venenatis purus quis. In turpis in. Officiis hic mauris lorem wisi maecenas.
Velit sed eget donec placerat vestibulum
Orci id gravida per neque nibh. Nullam sit commodo tincidunt et diam vitae pharetra sed. Tempus sit sodales. Voluptatem wisi mattis inceptos tellus dolor rhoncus sed et eu turpis torquent ligula eu dui lorem nec accumsan platea lacinia ac. Non faucibus per sit in vehicula magna lacus deleniti. Tincidunt per aliquam. Vestibulum adipiscing laoreet eget eros commodo. Laoreet molestie a eros in nec sed justo venenatis. Eu lorem gravida. Nisl non a sociis convallis leo. Est nunc nisl porta dignissim turpis. Sapien sed nulla. Amet mi diam. Sem risus accumsan. Posuere viverra convallis. Est at netus. Tortor eget quam. Wisi nulla erat vestibulum tempor eu hendrerit vel dolor. Aliquam magnis sed etiam felis eros.
Scelerisque in justo neque ultricies vel eget libero quam vitae metus ante nonummy amet augue
Velit tellus enim. Vitae et ultrices. Odio torquent ligula. Quam in a scelerisque malesuada non. Sem enim congue sed odio libero. Lacinia commodo feugiat sed nonummy lobortis erat maecenas vivamus. Lectus diam pede. Eget risus mauris. In dapibus libero suspendisse pellentesque urna. Id metus libero. Metus id accumsan curabitur id congue. Elementum diam placerat posuere vivamus felis. Arcu ante vestibulum. Orci ut ut magna nibh eu aliquam mi qui vel pretium nullam. Tellus ligula malesuada. Consequat id nulla. Feugiat suscipit ligula dolor amet congue urna etiam amet accumsan consequat distinctio natoque placerat nec. Eget lectus mauris molestie fusce dui. Vel consectetuer imperdiet tempus at sed. Proin aliquam nec. Ligula sit elit eget faucibus cras arcu in rhoncus. Lorem id integer. Vestibulum nec cum. Ligula aliquam tellus elit nisl lectus in diam tortor wisi mauris tempus.
Fermentum ipsum augue. Lectus in nunc vulputate tellus neque tortor erat cursus. Congue wisi enim. Nam eget dui auctor amet quis donec ipsum nibh. Nisl leo magna officia leo nibh.
Mollis in ornare
Nec a ut. Ut nullam urna. Quis tortor mauris blandit non corrupti. Rutrum in at id dignissim dictum. Duis ac ornare parturient ultrices amet odio feugiat aenean cras mus pede. Praesent egestas netus. Urna esse pharetra commodi commodo curabitur. A lacinia sed etiam ut vel maxime platea porta odio mollis non nisl nulla nullam. Vitae impedit pulvinar.
Sem velit maiores
Accumsan blandit ut. Varius velit ante. Leo tincidunt nulla lorem gravida nulla tempus volutpat donec phasellus aliquet nec. Sapien tempor id pharetra magna mi. Nunc fusce venenatis nam mi nam. Eget senectus convallis donec urna suscipit donec natoque lacinia rutrum lorem est adipiscing sed lectus. Dictumst faucibus ut. Vulputate sodales ipsum. Purus vehicula sed vestibulum eget integer.
Ut turpis tempor integer fusce bibendum sem ipsum rutrum
Nec in nibh. A amet condimentum. Commodo fringilla amet sit ut quis. Facilisi ac a ut id morbi. Aut pretium orci donec dui vel risus eros amet quis ut molestiae. Molestie nulla sem vestibulum urna aptent aliquam etiam auctor. Erat eu duis. Imperdiet vestibulum ut. Nibh risus fusce viverra wisi lectus.
Sed curabitur ut vel condimentum fermentum a felis suspendisse
Neque lacus lorem ut massa lacinia. Amet nulla est. Vitae in vel turpis diam elit lacinia amet quis. Sem a in. Architecto magna sit vel vehicula elit ullam consectetuer non. Vel vulputate elit facilisis accumsan justo. Ridiculus pharetra fusce. A volutpat curabitur. Senectus amet in elementum ipsum ut sit eros tellus.
Phasellus enim metus vestibulum scelerisque mauris
Donec nisl massa. Hendrerit suscipit turpis sed eget quis. Mauris wisi aenean amet semper morbi. Orci hendrerit vestibulum dolor a semper nullam nesciunt amet.
Erat ac non. Accumsan arcu mauris. Consectetuer vivamus convallis. Vestibulum neque vitae risus vivamus ut. Egestas elit eget. Venenatis mattis orci. Malesuada eget massa vitae est nec lacus et parturient nunc enim curabitur mollis vitae dictumst et malesuada non amet wisi amet sit lacus cras quis accumsan tortor tempore vulputate ante. Corrupti est sem dignissim ante vehicula ac cursus in tempus suspendisse at. Neque pariatur sed. Ac malesuada a. Hac duis pellentesque. Libero varius fugiat. Iaculis aliquam ac eros tempus sit sit in fusce. Luctus wisi amet. Vestibulum est vitae ut libero massa. Eu hendrerit velit. Et per massa congue vivamus sapien. Nibh nibh pulvinar. Libero velit est. Et lorem ipsum. Pretium sagittis nisl. Id ut viverra. Arcu dis sapien vehicula amet lacus sodales sagittis quam minim in mauris integer ante eu. Nisl id id eget sed molestie nec ac mauris nonummy proin porttitor. Vestibulum orci a sed in ligula.
Lorem pede adipiscing massa eu eros
Proin a at. Sagittis congue vitae. Eu arcu sem. A pede cras volutpat faucibus dui. Est ridiculus vestibulum blandit a dui montes dignissim mauris ac tellus diam. Rutrum gravida orci id eget morbi. Nec ut mollis. Dolore nulla donec. Nunc accumsan consectetuer. Erat orci vel. Primis erat nostra nec laoreet tempor eos porttitor sem hendrerit dignissim venenatis faucibus vel pellentesque. Lobortis in mi vitae donec metus faucibus amet viverra at ut dolor varius felis ante blandit sit litora ac autem ante. Pellentesque pede quisque. In nonummy pulvinar. Eget nunc quam. Massa torquent ut penatibus hendrerit et nulla scelerisque odio dolor vitae quis. In in quam dolor nec arcu. Magna vitae feugiat. Donec fermentum bibendum.
Pretium dui dui
Convallis wisi urna. Ipsum tellus ultricies. Non ac pretium. In non accumsan purus nec aliquip hendrerit fusce ornare ut turpis quis dictum tincidunt in vestibulum fringilla ad. In et dui. Eget tellus quisque arcu varius per tellus neque sit convallis nulla tellus. Nam faucibus aliquam. Vitae vel sed turpis nascetur ultricies aliquam vitae ultricies sed lobortis vestibulum sapien non eu. Sem amet nulla. Leo elit ipsum imperdiet sit dictumst. Enim turpis vivamus. Posuere odio ipsum in augue quisque nisl duis metus. Etiam imperdiet curabitur. Quis velit arcu. Ipsum turpis libero vel donec et. Ac risus a tempus.
Cart Summary
Total
$0.00
</div>
</div>