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>
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>
I'm working on a project for a buddy and I was wondering how I might be able to achieve a vertical scrolling effect similar to the one with books on this page https://pudding.cool/2019/06/summer-reading/
The vertical scroll bar indicator I'm looking to replicate is on the right side of the page
I looked at the code and it looks like they used a specific class as multiple divs, but wasnt sure if there was a different way to achieve this
EDIT: was in a rush when I posted this, more info follows.
I reviewed W3 schools guide on how to create a scroll indicator
https://www.w3schools.com/howto/howto_js_scroll_indicator.asp
and was able to modify it to be fixed and vertical, now I'm looking at using this concept to mirror the target outcome indicated above. I put together a very basic fiddle of the general idea
https://jsfiddle.net/sq0z314o/
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.height = scrolled + "%";
}
/* Style the header: fixed position (always stay at the top) */
.scroll {
position: fixed;
top: 0;
z-index: 1;
height: 100%;
background-color: #f1f1f1;
}
/* The progress container (grey background) */
.progress-container {
height: 100%;
width: 8px;
background: #ccc;
}
/* The progress bar (scroll indicator) */
.progress-bar {
width: 8px;
background: #4caf50;
height: 0%;
}
.content {
width: 75%;
margin: auto;
}
<div class="scroll">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<div class = "content">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae dignissim ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et luctus ex, ut interdum risus. Proin mi elit, viverra quis rhoncus euismod, luctus ac lectus. Phasellus laoreet accumsan pretium. Sed aliquam vestibulum sapien, et malesuada ipsum gravida faucibus. Duis vestibulum at nibh id ullamcorper. Curabitur maximus consequat diam non lobortis. Etiam tristique neque enim.</p>
<p> Nulla sem ex, ultrices at velit id, tempor consequat neque. Nulla at molestie mi, ullamcorper interdum purus. Cras elementum, orci a sollicitudin elementum, tellus sem sodales mi, eget consectetur mi nunc non velit. Maecenas id mauris massa. Donec sed eros erat. Nam interdum sollicitudin elementum. Maecenas laoreet commodo gravida. Duis orci dolor, aliquet sed viverra ut, euismod ac sem. In hendrerit nisl quis massa tristique, vitae cursus urna consectetur.</p>
<p> Suspendisse maximus dapibus orci, sed faucibus leo iaculis sed. Sed quam ante, accumsan ac gravida ut, feugiat volutpat ligula. Sed aliquet nisi metus, a dapibus diam porttitor et. Suspendisse potenti. Mauris dapibus interdum orci at blandit. Vivamus sit amet turpis est. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p> Etiam sodales id velit nec pulvinar. Nulla facilisi. Phasellus lobortis arcu a lobortis consectetur. Proin vitae laoreet odio. Ut sem purus, finibus non ante vitae, porttitor cursus leo. In sed dui lectus. Cras in enim vel ipsum fermentum condimentum. Praesent sit amet fringilla dui. Sed hendrerit varius enim vitae pulvinar. Duis hendrerit eleifend urna, eget cursus odio vulputate eu. Etiam pretium elit quis nibh tristique semper. Praesent vitae sem sed felis aliquam bibendum sed ac justo. Ut eu venenatis neque, vel tristique lacus. Etiam condimentum sit amet est in pulvinar.</p>
<p> Sed ut pellentesque dolor. Suspendisse blandit tellus at orci pellentesque, a mattis diam dictum. Nullam condimentum et sapien sed tincidunt. Sed consequat urna nec arcu suscipit, vel dapibus elit porttitor. Suspendisse arcu est, ultrices vitae nisi nec, finibus malesuada ex. Aliquam erat volutpat. Fusce odio felis, posuere a dictum ut, dignissim dictum felis. Integer quis eros erat. Sed sed augue finibus, mattis nisl at, auctor orci. Praesent ex metus, viverra et molestie quis, suscipit eget quam. Praesent vehicula elementum tortor, sed dictum mauris. In lectus elit, gravida id iaculis nec, bibendum et ante.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae dignissim ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et luctus ex, ut interdum risus. Proin mi elit, viverra quis rhoncus euismod, luctus ac lectus. Phasellus laoreet accumsan pretium. Sed aliquam vestibulum sapien, et malesuada ipsum gravida faucibus. Duis vestibulum at nibh id ullamcorper. Curabitur maximus consequat diam non lobortis. Etiam tristique neque enim.</p>
</div>
If you are ok with having a fixed height in the scrollbar, here you have an option. Hope it helps:
I duplicated the text content inside the .progress-container node and add a different class called .content-little. It has position: absolute so it overlaps the scrollbar.
I also added several styles, like a little font-size to the .content-little, hardcoded width and height to the scrollbar and children. So be aware that the CSS is different.
window.addEventListener('scroll', () => {
const winScroll =
document.body.scrollTop || document.documentElement.scrollTop;
const height =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
const scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.height = `${scrolled}%`;
});
.scroll {
position: fixed;
top: 0;
z-index: 1;
height: 320px;
background-color: #f1f1f1;
}
.progress-container {
position: relative;
height: 100%;
width: 70px;
background: #ccc;
padding-left: 6px;
}
.progress-bar {
position: absolute;
left: -10px;
width: 90px;
background: #4caf50;
height: 0%;
}
.content-little {
position: absolute;
font-size: 3px;
width: 60px;
height: 100%;
overflow: hidden;
}
.content {
width: 60%;
margin: auto;
}
<div class="scroll">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
<div class="content-little">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero
urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae
dignissim ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et
luctus ex, ut interdum risus. Proin mi elit, viverra quis rhoncus euismod,
luctus ac lectus. Phasellus laoreet accumsan pretium. Sed aliquam
vestibulum sapien, et malesuada ipsum gravida faucibus. Duis vestibulum at
nibh id ullamcorper. Curabitur maximus consequat diam non lobortis. Etiam
tristique neque enim.
</p>
<p>
Nulla sem ex, ultrices at velit id, tempor consequat neque. Nulla at
molestie mi, ullamcorper interdum purus. Cras elementum, orci a
sollicitudin elementum, tellus sem sodales mi, eget consectetur mi nunc
non velit. Maecenas id mauris massa. Donec sed eros erat. Nam interdum
sollicitudin elementum. Maecenas laoreet commodo gravida. Duis orci dolor,
aliquet sed viverra ut, euismod ac sem. In hendrerit nisl quis massa
tristique, vitae cursus urna consectetur.
</p>
<p>
Suspendisse maximus dapibus orci, sed faucibus leo iaculis sed. Sed quam
ante, accumsan ac gravida ut, feugiat volutpat ligula. Sed aliquet nisi
metus, a dapibus diam porttitor et. Suspendisse potenti. Mauris dapibus
interdum orci at blandit. Vivamus sit amet turpis est. Interdum et
malesuada fames ac ante ipsum primis in faucibus.
</p>
<p>
Etiam sodales id velit nec pulvinar. Nulla facilisi. Phasellus lobortis
arcu a lobortis consectetur. Proin vitae laoreet odio. Ut sem purus,
finibus non ante vitae, porttitor cursus leo. In sed dui lectus. Cras in
enim vel ipsum fermentum condimentum. Praesent sit amet fringilla dui. Sed
hendrerit varius enim vitae pulvinar. Duis hendrerit eleifend urna, eget
cursus odio vulputate eu. Etiam pretium elit quis nibh tristique semper.
Praesent vitae sem sed felis aliquam bibendum sed ac justo. Ut eu
venenatis neque, vel tristique lacus. Etiam condimentum sit amet est in
pulvinar.
</p>
<p>
Sed ut pellentesque dolor. Suspendisse blandit tellus at orci
pellentesque, a mattis diam dictum. Nullam condimentum et sapien sed
tincidunt. Sed consequat urna nec arcu suscipit, vel dapibus elit
porttitor. Suspendisse arcu est, ultrices vitae nisi nec, finibus
malesuada ex. Aliquam erat volutpat. Fusce odio felis, posuere a dictum
ut, dignissim dictum felis. Integer quis eros erat. Sed sed augue finibus,
mattis nisl at, auctor orci. Praesent ex metus, viverra et molestie quis,
suscipit eget quam. Praesent vehicula elementum tortor, sed dictum mauris.
In lectus elit, gravida id iaculis nec, bibendum et ante.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero
urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae
dignissim ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et
luctus ex, ut interdum risus. Proin mi elit, viverra quis rhoncus euismod,
luctus ac lectus. Phasellus laoreet accumsan pretium. Sed aliquam
vestibulum sapien, et malesuada ipsum gravida faucibus. Duis vestibulum at
nibh id ullamcorper. Curabitur maximus consequat diam non lobortis. Etiam
tristique neque enim.
</p>
</div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero
urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Nam vitae dignissim
ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et luctus ex,
ut interdum risus. Proin mi elit, viverra quis rhoncus euismod, luctus ac
lectus. Phasellus laoreet accumsan pretium. Sed aliquam vestibulum sapien,
et malesuada ipsum gravida faucibus. Duis vestibulum at nibh id ullamcorper.
Curabitur maximus consequat diam non lobortis. Etiam tristique neque enim.
</p>
<p>
Nulla sem ex, ultrices at velit id, tempor consequat neque. Nulla at
molestie mi, ullamcorper interdum purus. Cras elementum, orci a sollicitudin
elementum, tellus sem sodales mi, eget consectetur mi nunc non velit.
Maecenas id mauris massa. Donec sed eros erat. Nam interdum sollicitudin
elementum. Maecenas laoreet commodo gravida. Duis orci dolor, aliquet sed
viverra ut, euismod ac sem. In hendrerit nisl quis massa tristique, vitae
cursus urna consectetur.
</p>
<p>
Suspendisse maximus dapibus orci, sed faucibus leo iaculis sed. Sed quam
ante, accumsan ac gravida ut, feugiat volutpat ligula. Sed aliquet nisi
metus, a dapibus diam porttitor et. Suspendisse potenti. Mauris dapibus
interdum orci at blandit. Vivamus sit amet turpis est. Interdum et malesuada
fames ac ante ipsum primis in faucibus.
</p>
<p>
Etiam sodales id velit nec pulvinar. Nulla facilisi. Phasellus lobortis arcu
a lobortis consectetur. Proin vitae laoreet odio. Ut sem purus, finibus non
ante vitae, porttitor cursus leo. In sed dui lectus. Cras in enim vel ipsum
fermentum condimentum. Praesent sit amet fringilla dui. Sed hendrerit varius
enim vitae pulvinar. Duis hendrerit eleifend urna, eget cursus odio
vulputate eu. Etiam pretium elit quis nibh tristique semper. Praesent vitae
sem sed felis aliquam bibendum sed ac justo. Ut eu venenatis neque, vel
tristique lacus. Etiam condimentum sit amet est in pulvinar.
</p>
<p>
Sed ut pellentesque dolor. Suspendisse blandit tellus at orci pellentesque,
a mattis diam dictum. Nullam condimentum et sapien sed tincidunt. Sed
consequat urna nec arcu suscipit, vel dapibus elit porttitor. Suspendisse
arcu est, ultrices vitae nisi nec, finibus malesuada ex. Aliquam erat
volutpat. Fusce odio felis, posuere a dictum ut, dignissim dictum felis.
Integer quis eros erat. Sed sed augue finibus, mattis nisl at, auctor orci.
Praesent ex metus, viverra et molestie quis, suscipit eget quam. Praesent
vehicula elementum tortor, sed dictum mauris. In lectus elit, gravida id
iaculis nec, bibendum et ante.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero
urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Nam vitae dignissim
ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et luctus ex,
ut interdum risus. Proin mi elit, viverra quis rhoncus euismod, luctus ac
lectus. Phasellus laoreet accumsan pretium. Sed aliquam vestibulum sapien,
et malesuada ipsum gravida faucibus. Duis vestibulum at nibh id ullamcorper.
Curabitur maximus consequat diam non lobortis. Etiam tristique neque enim.
</p>
</div>
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>
I am trying to make a button that when clicked points to a specific section of a different page.
For example a user is on his profile page and clicks on "change personal information" button. He/She should be redirected to the settings page and the browser should scroll down (or land) where the "Change your Personal Information" section is (at the bottom of that page for example).
I use something similar in which it scrolls down to a section of the same page by using this js lines:
function goToByScroll(id){
// Removing "link" from the ID
id = id.replace("link", "");
// Scroll
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
which animates down to the section.
Can something like that be done? If so, tips to the right direction would be really appreciated.
Simply place this code in the document ready event handler.
You can get the hash value from the window object:
$(document).ready(function(){
var id = window.location.hash.replace('link', '');
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
});
As advised above you may scroll to id extracted from window.location, or you can simply red href-attribute of you <a> element.
$('.scroll-trigger').click(function(e) {
e.preventDefault();
var $that = $(this);
var target = $that.attr('href');
$('html,body').animate({
scrollTop: $(target).offset().top
}, 'slow');
});
#aboutRabbits {
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Go to Rabbits
<div id="content">
<div>
<p>Some nonsense text here</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam.</p>
</div>
<div id="aboutRabbits">
<p>Rabbits are small mammals in the family Leporidae of the order Lagomorpha, found in several parts of the world. There are eight different genera in the family classified as rabbits, including the European rabbit (Oryctolagus cuniculus), cottontail rabbits (genus Sylvilagus; 13 species), and the Amami rabbit (Pentalagus furnessi, an endangered species on Amami Ōshima, Japan). There are many other species of rabbit, and these, along with pikas and hares, make up the order Lagomorpha. The male is called a buck and the female is a doe; a young rabbit is a kitten or kit.</p>
</div>
<div>
<p>Some nonsense text here</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam.</p>
</div>
</div>
Step 1. Redirect to 'settings' page with div id in 'url'
Step 2. User url and get the div id from window.url using split().
Step 3. Use below function.
$(document).ready(function(){
var DivId = window.Url.split('#');
$('html,body').animate({
scrollTop: $("#"+DivID).offset().top},
'slow');
});