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.
Related
I'm trying to get a three panel layout (Left/Top-Right/Bottom-Right) using jQuery resizable so that I can have the user move the horizontal and vertical splitter/dividers.
I have got a certain amount of the way (see the code below/linked) - but I can't seem to get close enough.
I've looked at the https://api.jqueryui.com/resizable/ documentation - but this is of no help. I've also looked (and continue to look) at http://layout.jquery-dev.com/demos.cfm - but it's not obvious what js is actually required in these (not a very clever move for documentation!)
Where am I going wrong?
Can it be done with just jquery/jquery-ui or do I need another library?
$(function() {
$("#left-container").resizable({
handles: {
e: "#horizontalHandle"
},
resize: function(e, ui) {
$("#right-container").width(
$("#container").width() -
ui.size.width - 20 -
parseInt($("#right-container").css("margin-left")) -
parseInt($("#right-container").css("margin-right")) -
parseInt($("#right-container").css("padding-left")) -
parseInt($("#right-container").css("padding-right")));
}
});
$("#right-container").resizable({
handles: {
s: "#verticalHandle"
},
resize: function(e, ui) {
$("#right-bottom").height($("#container").height() -
ui.size.height - 10 -
parseInt($("#right-top").css("margin-top")) -
parseInt($("#right-top").css("margin-bottom")) -
parseInt($("#right-top").css("padding-top")) -
parseInt($("#right-top").css("padding-bottom")));
}
});
});
#container,
#left,
#right-container,
#horizontalHandle {
height: calc(100vh - 120px);
}
#container {
width: 100vw;
overflow: hidden;
font-family: Lucida Console, Courier New, system-ui, Trebuchet MS, Tahoma, Arial Narrow, Century Gothic, Verdana, sans-serif;
font-size: 9pt;
line-height: 16px;
margin-bottom: 30px;
}
#left,
#right-container,
#horizontalHandle {
position: absolute;
top: 30px;
}
#left,
#right-container {
padding: 10px;
margin: 0;
color: black;
overflow: auto;
}
#left-container {
position: absolute;
width: 25%;
left: 0;
top: 0;
}
#horizontalHandle {
width: 3px;
background: red;
right: 3px;
z-index: 2;
}
#left {
left: 0;
width: calc(100% - 5px);
padding-right: 0;
background-color: lightgray;
}
#right-container {
right: 1px;
width: 75%;
xmargin-left: 10px;
background-color: #f5f5f5;
white-space: nowrap;
}
#right-top {
background-color: lightgrey;
height: 10%;
white-space: normal;
}
#verticalHandle {
height: 3px;
background: red;
bottom: 3px;
z-index: 2;
}
#right-bottom {
background-color: #f3f0f0;
height: 90%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" ></script><div>
<div id='container'>
<div id='left-container'>
<div id='horizontalHandle' class='ui-resizable-handle ui-resizable-e'></div>
<div id='left'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc eget lorem dolor sed viverra ipsum. Quis varius quam quisque id diam vel quam elementum pulvinar. Turpis egestas sed tempus urna et pharetra pharetra massa. Sed risus pretium quam vulputate dignissim suspendisse in. Quis hendrerit dolor magna eget est. Augue neque gravida in fermentum et sollicitudin. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Nibh tortor id aliquet lectus. Volutpat diam ut venenatis tellus in metus vulputate. Massa vitae tortor condimentum lacinia quis vel. Nec ultrices dui sapien eget mi proin sed. Augue neque gravida in fermentum et.'
+'Consectetur lorem donec massa sapien. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Fringilla est ullamcorper eget nulla. Sagittis id consectetur purus ut faucibus. Consequat ac felis donec et. Tellus orci ac auctor augue mauris augue neque gravida. Ut pharetra sit amet aliquam. A diam maecenas sed enim ut. Cras pulvinar mattis nunc sed blandit libero. Facilisi nullam vehicula ipsum a. Viverra tellus in hac habitasse.'
+'Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Tellus at urna condimentum mattis pellentesque id nibh. Lorem donec massa sapien faucibus et molestie ac. Aliquam malesuada bibendum arcu vitae. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Pharetra vel turpis nunc eget. Vitae elementum curabitur vitae nunc. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non. Enim ut sem viverra aliquet eget sit amet. Sem nulla pharetra diam sit amet nisl suscipit. Amet massa vitae tortor condimentum lacinia quis vel. Erat pellentesque adipiscing commodo elit at imperdiet. Tortor id aliquet lectus proin nibh nisl condimentum id venenatis. A iaculis at erat pellentesque adipiscing. Porta lorem mollis aliquam ut porttitor leo.'
+'Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Bibendum neque egestas congue quisque. Adipiscing vitae proin sagittis nisl rhoncus mattis. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Sodales ut eu sem integer. Accumsan lacus vel facilisis volutpat. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Bibendum est ultricies integer quis auctor elit. Sagittis nisl rhoncus mattis rhoncus urna. Amet facilisis magna etiam tempor orci eu.'
+'Fusce ut placerat orci nulla. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed. Platea dictumst quisque sagittis purus sit amet volutpat. </div>
</div>
<div id='right-container'>
<div id='right-top'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc eget lorem dolor sed viverra ipsum. Quis varius quam quisque id diam vel quam elementum pulvinar. Turpis egestas sed tempus urna et pharetra pharetra massa. Sed risus pretium quam vulputate dignissim suspendisse in. Quis hendrerit dolor magna eget est. Augue neque gravida in fermentum et sollicitudin. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Nibh tortor id aliquet lectus. Volutpat diam ut venenatis tellus in metus vulputate. Massa vitae tortor condimentum lacinia quis vel. Nec ultrices dui sapien eget mi proin sed. Augue neque gravida in fermentum et.'
+'Consectetur lorem donec massa sapien. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Fringilla est ullamcorper eget nulla. Sagittis id consectetur purus ut faucibus. Consequat ac felis donec et. Tellus orci ac auctor augue mauris augue neque gravida. Ut pharetra sit amet aliquam. A diam maecenas sed enim ut. Cras pulvinar mattis nunc sed blandit libero. Facilisi nullam vehicula ipsum a. Viverra tellus in hac habitasse.'
+'Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Tellus at urna condimentum mattis pellentesque id nibh. Lorem donec massa sapien faucibus et molestie ac. Aliquam malesuada bibendum arcu vitae. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Pharetra vel turpis nunc eget. Vitae elementum curabitur vitae nunc. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non. Enim ut sem viverra aliquet eget sit amet. Sem nulla pharetra diam sit amet nisl suscipit. Amet massa vitae tortor condimentum lacinia quis vel. Erat pellentesque adipiscing commodo elit at imperdiet. Tortor id aliquet lectus proin nibh nisl condimentum id venenatis. A iaculis at erat pellentesque adipiscing. Porta lorem mollis aliquam ut porttitor leo.'
+'Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Bibendum neque egestas congue quisque. Adipiscing vitae proin sagittis nisl rhoncus mattis. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Sodales ut eu sem integer. Accumsan lacus vel facilisis volutpat. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Bibendum est ultricies integer quis auctor elit. Sagittis nisl rhoncus mattis rhoncus urna. Amet facilisis magna etiam tempor orci eu.'
+'Fusce ut placerat orci nulla. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed. Platea dictumst quisque sagittis purus sit amet volutpat. </div>
<div id='verticalHandle' class='ui-resizable-handle ui-resizable-s'></div>
<div id='right-bottom'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc eget lorem dolor sed viverra ipsum. Quis varius quam quisque id diam vel quam elementum pulvinar. Turpis egestas sed tempus urna et pharetra pharetra massa. Sed risus pretium quam vulputate dignissim suspendisse in. Quis hendrerit dolor magna eget est. Augue neque gravida in fermentum et sollicitudin. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Nibh tortor id aliquet lectus. Volutpat diam ut venenatis tellus in metus vulputate. Massa vitae tortor condimentum lacinia quis vel. Nec ultrices dui sapien eget mi proin sed. Augue neque gravida in fermentum et.'
+'Consectetur lorem donec massa sapien. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Fringilla est ullamcorper eget nulla. Sagittis id consectetur purus ut faucibus. Consequat ac felis donec et. Tellus orci ac auctor augue mauris augue neque gravida. Ut pharetra sit amet aliquam. A diam maecenas sed enim ut. Cras pulvinar mattis nunc sed blandit libero. Facilisi nullam vehicula ipsum a. Viverra tellus in hac habitasse.'
+'Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Tellus at urna condimentum mattis pellentesque id nibh. Lorem donec massa sapien faucibus et molestie ac. Aliquam malesuada bibendum arcu vitae. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Pharetra vel turpis nunc eget. Vitae elementum curabitur vitae nunc. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non. Enim ut sem viverra aliquet eget sit amet. Sem nulla pharetra diam sit amet nisl suscipit. Amet massa vitae tortor condimentum lacinia quis vel. Erat pellentesque adipiscing commodo elit at imperdiet. Tortor id aliquet lectus proin nibh nisl condimentum id venenatis. A iaculis at erat pellentesque adipiscing. Porta lorem mollis aliquam ut porttitor leo.'
+'Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Bibendum neque egestas congue quisque. Adipiscing vitae proin sagittis nisl rhoncus mattis. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Sodales ut eu sem integer. Accumsan lacus vel facilisis volutpat. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Bibendum est ultricies integer quis auctor elit. Sagittis nisl rhoncus mattis rhoncus urna. Amet facilisis magna etiam tempor orci eu.'
+'Fusce ut placerat orci nulla. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed. Platea dictumst quisque sagittis purus sit amet volutpat. </div>
</div>
</div>
</div>
(Note, I don't know why the stackoverflow code runner doesn't work - but see https://jsfiddle.net/Abeeee/57ofh1gq/20/ for a running version)
Note:
I need to include content scrollbars where applicable
I need to handle window resize
I need the resize handles to sit to the right/bottom of the scrollbars when they are visible
Would also like to memorize the layout for use next time the screen is refreshed
Surely this should be something out of the box but it seems elusive.
I'm using FullPage.js for full screen scroll.. they do have a PAID EXTENSION called 'scrollOverflowReset' .. Use scrollOverflowReset: true to reset the scrollbar after leaving the section or slide and always show the start of the content on section load.
my question is with having a paid extension for this, is it not possible to manually create a javascript code to scroll back to the top a div when it comes into view.
for example, this div will allow scroll down till the section is done, and then jumps down to the next full screen section.
if I scroll back up to the previous section, how do I have it begin at the start of the content and not where it was scrolled down to !
I tried this and didn't work:
var myDiv = document.getElementById('containerDiv');
myDiv.innerHTML = variableLongText;
myDiv.scrollTop = 0;
FullPage.js has a number of callbacks that you can utilize. You can use the [onLeave] callback1.
Try this code:
jQuery(document).ready(function() {
jQuery('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'white', '#ccddff'],
scrollOverflow: true,
onLeave: function(origin, destination) {
var iscroll = $('.fp-section.active').find('.fp-slide.active').find('.fp-scrollable').prop("fp_iscrollInstance");
if (iscroll)
iscroll.scrollTo(0, 0);
}
});
});
.section {
position: relative;
}
.slide {
font-size: 20px;
padding: 5rem;
line-height: 2rem;
box-sizing: border-box;
}
body {
margin: 0;
}
h1 {
margin: 0;
text-align: center;
padding: 2rem;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://alvarotrigo.com/fullPage/vendors/scrolloverflow.min.js"></script>
<script src="https://raw.githack.com/alvarotrigo/fullPage.js/master/dist/fullpage.js"></script>
<div id="fullpage">
<div class="section">
<h1>Section</h1>
</div>
<div class="section">
<h1>Section</h1>
</div>
<div class="section">
<div class='slide'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vulputate ut pharetra sit amet aliquam id diam maecenas. Et tortor at risus viverra adipiscing at. Nisi lacus sed viverra tellus
in hac habitasse. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Elementum nibh tellus molestie nunc. Leo vel orci porta non pulvinar. Semper auctor neque vitae tempus quam pellentesque nec. Massa massa ultricies mi quis hendrerit
dolor magna. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris. Consequat nisl vel pretium lectus quam id. Augue neque gravida in fermentum et sollicitudin ac orci phasellus. Maecenas volutpat blandit aliquam etiam erat velit
scelerisque. At elementum eu facilisis sed odio morbi. Ornare lectus sit amet est placerat in egestas erat. Mauris a diam maecenas sed enim ut. Elit ut aliquam purus sit amet luctus venenatis lectus. Purus in mollis nunc sed id. Amet nulla facilisi
morbi tempus iaculis urna id volutpat. Nisi porta lorem mollis aliquam. Scelerisque varius morbi enim nunc. Integer malesuada nunc vel risus commodo viverra. Semper feugiat nibh sed pulvinar proin. Nec dui nunc mattis enim ut. Nisl condimentum id
venenatis a condimentum vitae. Amet tellus cras adipiscing enim eu turpis egestas pretium aenean. Feugiat sed lectus vestibulum mattis ullamcorper velit sed. Amet porttitor eget dolor morbi non arcu risus quis. Massa eget egestas purus viverra accumsan.
Purus in mollis nunc sed id. Aliquam sem fringilla ut morbi tincidunt augue interdum. Praesent semper feugiat nibh sed pulvinar. Vel pretium lectus quam id leo in vitae turpis. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Ullamcorper
eget nulla facilisi etiam dignissim diam quis enim lobortis. Turpis nunc eget lorem dolor sed. Nibh sit amet commodo nulla. Tristique risus nec feugiat in fermentum posuere urna. Egestas diam in arcu cursus euismod quis. Vel quam elementum pulvinar
etiam non quam. Sit amet venenatis urna cursus eget nunc. A arcu cursus vitae congue. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Sagittis vitae et leo duis ut diam quam nulla porttitor. Lobortis mattis aliquam faucibus purus.
Eu facilisis sed odio morbi quis commodo odio aenean sed. Nullam vehicula ipsum a arcu cursus vitae congue. Vestibulum sed arcu non odio euismod. Consequat mauris nunc congue nisi vitae suscipit tellus mauris a. Pellentesque massa placerat duis
ultricies lacus sed turpis tincidunt. Nunc sed id semper risus in hendrerit gravida rutrum. Ullamcorper dignissim cras tincidunt lobortis feugiat. Et tortor consequat id porta nibh venenatis cras sed felis. Cras fermentum odio eu feugiat. Est velit
egestas dui id. Sapien et ligula ullamcorper malesuada proin. Quisque egestas diam in arcu cursus euismod. Vitae ultricies leo integer malesuada nunc vel. Nulla at volutpat diam ut venenatis. Tempus egestas sed sed risus pretium quam vulputate dignissim.
Elementum facilisis leo vel fringilla est ullamcorper eget nulla. Amet facilisis magna etiam tempor. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.
Nec dui nunc mattis enim ut tellus elementum. Aliquam ultrices sagittis orci a scelerisque purus semper eget. Aliquet nibh praesent tristique magna sit amet. Aliquet nibh praesent tristique magna sit amet. Enim facilisis gravida neque convallis
a cras. Placerat in egestas erat imperdiet sed euismod nisi porta lorem. Vitae nunc sed velit dignissim sodales ut eu sem integer. Velit euismod in pellentesque massa placerat duis ultricies lacus sed. Scelerisque in dictum non consectetur a erat
nam at. Semper feugiat nibh sed pulvinar proin. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam. Diam in arcu cursus euismod. Vel eros donec ac odio tempor orci dapibus ultrices in. In massa tempor nec feugiat. Massa massa
ultricies mi quis hendrerit dolor. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. In nisl nisi scelerisque eu ultrices. Tellus elementum sagittis vitae et leo duis. Pharetra sit amet aliquam id diam maecenas ultricies mi eget.
Vestibulum morbi blandit cursus risus at ultrices mi tempus. Rhoncus dolor purus non enim praesent. Magna fermentum iaculis eu non. Morbi tincidunt augue interdum velit euismod in pellentesque. Eu lobortis elementum nibh tellus molestie nunc non
blandit. In vitae turpis massa sed elementum tempus egestas sed sed. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Nisl condimentum id venenatis a condimentum.
</div>
</div>
<div class="section">
<h1>Section</h1>
</div>
<div class="section">
<h1>Section</h1>
</div>
</div>
I want to scroll to the bottom of an element. I searched for solutions here and i got this
but the scrolltop is getting set to zero on first click and if I click on the element again, it scrolls to bottom. I want to scroll to the bottom on first click. The duplicate suggested to me is wrong.
I am using Javascript. Not jquery,
var element = document.querySelector('.message');
element.scrollTop = element.scrollHeight;
.message {
width: 900px;
height: 450px;
margin-top: 0%;
overflow-y: scroll;
}
I have replicated your question and it's working. When I click the first time in the message area the message scrolls to bottom.
Here is the working example:
document.querySelector('.message').addEventListener('click', () => {
var element = document.querySelector('.message');
element.scrollTop = element.scrollHeight;
})
.message {
width: 900px;
height: 100px;
margin-top: 0%;
overflow-y: scroll;
}
<div class="message">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur lorem donec massa sapien faucibus. Lorem ipsum dolor sit amet consectetur adipiscing elit duis. Massa ultricies mi quis hendrerit dolor magna eget est lorem. Diam quam nulla porttitor massa id. Semper viverra nam libero justo laoreet. Dui vivamus arcu felis bibendum ut tristique et. Proin sed libero enim sed faucibus. Consectetur libero id faucibus nisl tincidunt. Arcu felis bibendum ut tristique et egestas quis ipsum. Quisque id diam vel quam. Dui sapien eget mi proin sed. Sit amet luctus venenatis lectus magna fringilla.
Velit dignissim sodales ut eu sem. Malesuada fames ac turpis egestas sed. Tellus orci ac auctor augue mauris augue neque gravida. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Facilisis mauris sit amet massa vitae tortor condimentum. Feugiat nibh sed pulvinar proin. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Laoreet sit amet cursus sit amet. Diam maecenas sed enim ut sem viverra aliquet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Sagittis orci a scelerisque purus semper eget duis. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Odio tempor orci dapibus ultrices in iaculis. Lacus sed turpis tincidunt id.
Tortor condimentum lacinia quis vel eros donec ac odio tempor. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Luctus accumsan tortor posuere ac. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Amet cursus sit amet dictum sit amet justo donec enim. Integer vitae justo eget magna fermentum. Lectus arcu bibendum at varius vel pharetra vel. Diam maecenas ultricies mi eget mauris pharetra et. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Nullam non nisi est sit amet facilisis magna etiam tempor. Laoreet non curabitur gravida arcu ac tortor. Sed velit dignissim sodales ut eu. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec.
Enim ut sem viverra aliquet. Sit amet cursus sit amet dictum. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Nullam vehicula ipsum a arcu cursus vitae congue mauris rhoncus. In hac habitasse platea dictumst quisque sagittis purus. Libero justo laoreet sit amet cursus sit amet dictum. Nisl vel pretium lectus quam id. Tempor orci dapibus ultrices in iaculis nunc. Turpis egestas pretium aenean pharetra. Sit amet commodo nulla facilisi. Eget est lorem ipsum dolor sit amet consectetur. Sagittis vitae et leo duis ut diam quam. Nulla aliquet enim tortor at auctor urna nunc id cursus. Curabitur vitae nunc sed velit dignissim sodales. Sit amet massa vitae tortor condimentum lacinia quis vel. Id nibh tortor id aliquet lectus proin.
Varius quam quisque id diam vel quam elementum. Felis eget velit aliquet sagittis id consectetur purus ut. Mauris a diam maecenas sed enim ut sem viverra aliquet. Arcu dui vivamus arcu felis. Ac turpis egestas sed tempus urna et. Vel pharetra vel turpis nunc eget lorem. Praesent tristique magna sit amet purus. In ornare quam viverra orci sagittis. Potenti nullam ac tortor vitae purus. Donec ac odio tempor orci dapibus ultrices in.
Varius quam quisque id diam vel quam elementum. Felis eget velit aliquet sagittis id consectetur purus ut. Mauris a diam maecenas sed enim ut sem viverra aliquet. Arcu dui vivamus arcu felis. Ac turpis egestas sed tempus urna et. Vel pharetra vel turpis nunc eget lorem. Praesent tristique magna sit amet purus. In ornare quam viverra orci sagittis. Potenti nullam ac tortor vitae purus. Donec ac odio tempor orci dapibus ultrices in.
Varius quam quisque id diam vel quam elementum. Felis eget velit aliquet sagittis id consectetur purus ut. Mauris a diam maecenas sed enim ut sem viverra aliquet. Arcu dui vivamus arcu felis. Ac turpis egestas sed tempus urna et. Vel pharetra vel turpis nunc eget lorem. Praesent tristique magna sit amet purus. In ornare quam viverra orci sagittis. Potenti nullam ac tortor vitae purus. Donec ac odio tempor orci dapibus ultrices in.
</div>
I'm trying to scroll using pointer events. I realize this isn't the proper way to do scrolling. I'm creating a game with a 'variable' scrolling experience.
The code 'scrolls' but it's very wobbly and jerky. The console.log shows something curious: scrollBy() is called with a -6 (for example) and then immediately called again with a 6. It appears that calling scrollBy() causes onpointermove to be called again?
I'm guessing I'm making a noob mistake, triggering a duplicate event.
I'm willing to try a very different approach. I assumed using pointer-events was the right way to do this as it should work with both mouse and finger events.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll Guesture</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#target {
touch-action: pan-x;
}
</style>
</head>
<script>
var lastY;
var thisY;
function down_handler(event) {
lastY = Math.trunc(event.offsetY);
console.log("down_handler " + lastY);
}
function move_handler(event) {
thisY = Math.trunc(event.offsetY);
deltaY = lastY - thisY;
console.log("move_handler " + deltaY);
window.scrollBy(0, deltaY);
lastY = thisY;
}
function init() {
var el=document.getElementById("target");
el.onpointerdown = down_handler;
el.onpointermove = move_handler;
}
</script>
<body onload="init();">
<div id="target">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.</p>
<p>Parturient montes nascetur ridiculus mus mauris. Aliquam faucibus purus in massa tempor nec. A arcu cursus vitae congue mauris rhoncus aenean vel elit. In arcu cursus euismod quis viverra. Dolor sit amet consectetur adipiscing elit. Enim nec dui nunc mattis enim ut tellus elementum. In aliquam sem fringilla ut. Eget arcu dictum varius duis at consectetur lorem. In ornare quam viverra orci sagittis eu volutpat odio facilisis. Blandit massa enim nec dui. Justo eget magna fermentum iaculis eu non diam phasellus. Phasellus vestibulum lorem sed risus ultricies tristique.</p>
<p>Odio facilisis mauris sit amet massa vitae. Feugiat in ante metus dictum. Commodo viverra maecenas accumsan lacus. Tristique risus nec feugiat in fermentum posuere. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Adipiscing bibendum est ultricies integer. Dignissim suspendisse in est ante in. Aenean pharetra magna ac placerat vestibulum. Netus et malesuada fames ac turpis egestas sed tempus. Egestas sed tempus urna et pharetra pharetra massa massa. Dictum non consectetur a erat nam. A iaculis at erat pellentesque adipiscing commodo. Odio aenean sed adipiscing diam donec adipiscing. Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Tortor pretium viverra suspendisse potenti. Risus ultricies tristique nulla aliquet. </p>
</div>
</body>
</html>
Original Answer
Your issue stems from this little piece right here: event.offsetY
In short it should be event.clientY
As for why this works:
offsetX and offsetY are relative to the parent container - which shifts from being a <p> tag to being <body> or any other tag.
clientX and clientY are relative to the viewport - i.e. the top left corner of your screen
For more info here is a good explanation of pageX/Y, screenX/Y, and clientX/Y: Stackoverflow answer
Edit
#ScottJenson also asked:
I'm confused as to why move_handler() would be called with a deltaY
of -10 followed by 10 (when using offsetY).
Answer:
try making the text boxes bigger like so:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros. Interdum velit euismod in pellentesque massa placerat. Fermentum leo vel orci porta. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Duis ut diam quam nulla porttitor massa. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sit amet cursus sit amet dictum sit amet justo. Lectus quam id leo in vitae. Posuere urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Elit eget gravida cum sociis natoque penatibus. Tortor condimentum lacinia quis vel eros donec ac. Lectus mauris ultrices eros in cursus. Elit at imperdiet dui accumsan sit amet nulla.
</p>
and put three or four boxes.
Changed clientY back to offsetY
If you try to scroll on the block itself you'll notice it's smooth but as soon as you cross the line from one box to another the value jumps by the height of the text box. The reason this happens is because the mouse pointer is calculated in reference of the top left corner of the individual <p> tags. i.e. if you're 50px down from the <p> tag you are hovering over that is the value of offsetY
clientY on the other hand always has the same reference point - the top left corner of the screen. So there are no points where one box has a wildly different value.
I am having real difficulty getting a jQuery show/hide on scroll to run only on desktop viewports.
Try as I might, I cannot get the hide function to cease working once the screen is mobile.
I have already tried writing the function utilising using a CSS media query so that it only works in the presence of a display: none, building on #Andrews comment below.
I can't simply use show/hide via a media query as suggested in comments. Because I need the two variations of the desktop header.
$(document).ready(function () {
$(window).scroll( function() {
if( $(this).scrollTop() > 0 ) {
$(".middle-tier, .top-tier-menu-bar ").hide();}
else {$(".middle-tier, .top-tier-menu-bar").show();}
});
});
.placeholder-style{
background-color: lightblue;
border: 2px solid blue;
padding: .3em;
text-align: center;
margin: .5em;
}
.logo{
width: 100px;
}
.top-tier-menu-bar{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.mobile-nav-extra-widgets{
display: flex;
flex-direction: column;
align-items: flex-start;
}
.middle-tier{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.right-icons{
display: flex;
flex-direction: row;
justify-content:space-around;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
li {
display: inline;
padding: 2em;
}
.header{
position: sticky;
overflow: hidden;
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
background-color: aliceblue;
}
.page-contents{margin-top:250px;}
#media (min-width:500px) {
.header{position:fixed;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class = "header">
<!--Top tier menu starts-->
<div class="top-tier-menu-bar">
<div class="trust-pilot-widget placeholder-style">
<span>TrustPilot Widget</span>
</div>
<div class="click-to-call placeholder-style">
<span>Phone number</span>
</div>
</div>
<div class = "middle-tier">
<div class ="search-icon placeholder-style">Search</div>
<div class = "central-logo placeholder-style logo">Logo</div>
<div class ="right-icons placeholder-style">
<div class = "user placeholder-style">User</div>
<div class = "cart placeholder-style">Cart</div>
</div>
</div>
<div class="nav">
<ul class="placeholder-style">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>
</div>
<div class="page-contents">
<div id="mobile-viewport-detect">test</div>
<p class="placeholder-style">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu feugiat pretium nibh ipsum consequat nisl vel. Sed elementum tempus egestas sed sed risus. Arcu dictum varius duis at consectetur lorem donec massa sapien. Quis blandit turpis cursus in hac habitasse platea dictumst. Est lorem ipsum dolor sit amet consectetur. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Sed nisi lacus sed viverra tellus in hac habitasse. Congue eu consequat ac felis donec. Nunc sed id semper risus in hendrerit gravida. Felis imperdiet proin fermentum leo vel. Eu consequat ac felis donec et odio pellentesque. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Consectetur a erat nam at lectus urna duis convallis. Auctor eu augue ut lectus arcu bibendum at varius. Quam lacus suspendisse faucibus interdum posuere. In hendrerit gravida rutrum quisque non tellus. Euismod in pellentesque massa placerat duis ultricies. Pellentesque elit eget gravida cum sociis natoque.</p>
<p class="placeholder-style">Etiam tempor orci eu lobortis. Mattis pellentesque id nibh tortor id aliquet lectus proin. Eu nisl nunc mi ipsum faucibus vitae aliquet nec. Elit eget gravida cum sociis natoque penatibus et magnis. Risus quis varius quam quisque. Suspendisse in est ante in nibh. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Varius morbi enim nunc faucibus a pellentesque sit amet porttitor. Risus pretium quam vulputate dignissim suspendisse in est ante in. </p>
<p class="placeholder-style">Commodo elit at imperdiet dui. Facilisis magna etiam tempor orci eu lobortis. Tellus integer feugiat scelerisque varius morbi enim nunc. Sed odio morbi quis commodo odio aenean. Ultrices sagittis orci a scelerisque. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Ipsum dolor sit amet consectetur adipiscing elit ut. </p>
<p class="placeholder-style">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu feugiat pretium nibh ipsum consequat nisl vel. Sed elementum tempus egestas sed sed risus. Arcu dictum varius duis at consectetur lorem donec massa sapien. Quis blandit turpis cursus in hac habitasse platea dictumst. Est lorem ipsum dolor sit amet consectetur. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Sed nisi lacus sed viverra tellus in hac habitasse. Congue eu consequat ac felis donec. Nunc sed id semper risus in hendrerit gravida. Felis imperdiet proin fermentum leo vel. Eu consequat ac felis donec et odio pellentesque. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Consectetur a erat nam at lectus urna duis convallis. Auctor eu augue ut lectus arcu bibendum at varius. Quam lacus suspendisse faucibus interdum posuere. In hendrerit gravida rutrum quisque non tellus. Euismod in pellentesque massa placerat duis ultricies. Pellentesque elit eget gravida cum sociis natoque.</p>
<p class="placeholder-style">Etiam tempor orci eu lobortis. Mattis pellentesque id nibh tortor id aliquet lectus proin. Eu nisl nunc mi ipsum faucibus vitae aliquet nec. Elit eget gravida cum sociis natoque penatibus et magnis. Risus quis varius quam quisque. Suspendisse in est ante in nibh. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Varius morbi enim nunc faucibus a pellentesque sit amet porttitor. Risus pretium quam vulputate dignissim suspendisse in est ante in. </p>
<p class="placeholder-style">Commodo elit at imperdiet dui. Facilisis magna etiam tempor orci eu lobortis. Tellus integer feugiat scelerisque varius morbi enim nunc. Sed odio morbi quis commodo odio aenean. Ultrices sagittis orci a scelerisque. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Ipsum dolor sit amet consectetur adipiscing elit ut. </p>
<p class="placeholder-style" style="placeholder-style">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu feugiat pretium nibh ipsum consequat nisl vel. Sed elementum tempus egestas sed sed risus. Arcu dictum varius duis at consectetur lorem donec massa sapien. Quis blandit turpis cursus in hac habitasse platea dictumst. Est lorem ipsum dolor sit amet consectetur. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Sed nisi lacus sed viverra tellus in hac habitasse. Congue eu consequat ac felis donec. Nunc sed id semper risus in hendrerit gravida. Felis imperdiet proin fermentum leo vel. Eu consequat ac felis donec et odio pellentesque. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Consectetur a erat nam at lectus urna duis convallis. Auctor eu augue ut lectus arcu bibendum at varius. Quam lacus suspendisse faucibus interdum posuere. In hendrerit gravida rutrum quisque non tellus. Euismod in pellentesque massa placerat duis ultricies. Pellentesque elit eget gravida cum sociis natoque.</p>
<p class="placeholder-style">Etiam tempor orci eu lobortis. Mattis pellentesque id nibh tortor id aliquet lectus proin. Eu nisl nunc mi ipsum faucibus vitae aliquet nec. Elit eget gravida cum sociis natoque penatibus et magnis. Risus quis varius quam quisque. Suspendisse in est ante in nibh. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Varius morbi enim nunc faucibus a pellentesque sit amet porttitor. Risus pretium quam vulputate dignissim suspendisse in est ante in. </p>
<p class="placeholder-style">Commodo elit at imperdiet dui. Facilisis magna etiam tempor orci eu lobortis. Tellus integer feugiat scelerisque varius morbi enim nunc. Sed odio morbi quis commodo odio aenean. Ultrices sagittis orci a scelerisque. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Ipsum dolor sit amet consectetur adipiscing elit ut. </p>
</div>
</body>
I have now made a fiddle to fully demonstrate the context and how it is working currently. Would really appreciate a tip here.
Thank you friends.