Related
I got a simple html page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
<script type="text/javascript" src="https://externalsite.com/script.js" async=true>
</script>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</p>
</body>
</html>
A js file (hosted on an external site) modify the code in this way.
It displays a div in the center of the page with two buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
<script type="text/javascript" src="https://externalsite.com/script.js" async=true>
</script>
</head>
<body>
<div class="qc-cmp-ui-container qc-cmp-showing">
<div class="qc-cmp-ui qc-cmp-showing" id="qcCmpUi">
<img class="qc-cmp-publisher-logo" src="http://www.xxx.it/logo.png" onerror="window.__cmpui("hideLogo",event)">
<div class="qc-cmp-ui-content">
<h1 class="qc-cmp-title"> title </h1>
<span>
<p class="qc-cmp-main-messaging"> bla bla bla. </p>
<span>
<div class="qc-cmp-buttons qc-cmp-primary-buttons" id="qcCmpButtons"><button class="qc-cmp-button qc-cmp-secondary-button">Non Accetto</button> <button class="qc-cmp-button" onclick="window.__cmpui("setAndSaveAllConsent",!0)"> Accetto </button> </div>
</span>
</span>
</div>
<div class="qc-cmp-alt-buttons"> <a id="qc-cmp-purpose-button" class="qc-cmp-alt-action qc-cmp-center-bottom" onclick="window.__cmpui("updateConsentUi",2)"> Mostra tutte le finalità di utilizzo </a> </div>
</div>
</div>
</body>
</html>
My goal is to hide the div with qc-cmp-ui-container class
I tried adding jQuery
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM completamente caricato e analizzato");
$('.qc-cmp-ui-container').hide();
});
But the div is always visible.
How can I hide it?
You are trying to hide the div before he's actually created. DOMContentLoaded event fires when the DOM is loaded, but not when the DOMContent is changed.
Try to wait the div to be created and after that hide it.
var interval = setInterval(function(){
if($('.qc-cmp-ui-container').length) {
$('.qc-cmp-ui-container').hide();
clearInterval(interval);
}
}, 150);
I'm trying to change the color of my navbar depending on its position in the html doc. It changes to black at first, but it doesn't change again. Am I even calculating the position correctly? Here is the code.
$(function () {
console.log('Running from the navBar.js')
var scrollStart = 0;
var $navStartChange = $('nav');
var $navChild = $('.navigation-flex');
var offset = $navStartChange.offset();
var $portfolioPos = $('section#portfolio').position();
var $openSourcePos = $('section#openSource').position();
$(document).scroll(function () {
scrollStart = $(this).scrollTop();
console.log('This is the position of the porfolio section: ' + $portfolioPos.top);
console.log('This is the position of offset: ' + offset.top);
if ( scrollStart >= $portfolioPos.top ) {
console.log('Arrived at the top of the portfolio section');
$navStartChange.css('position', 'fixed');
$navChild.css('background-color', '#2c3e50');
} else if ( scrollStart >= $openSourcePos.top ) {
console.log('Arrived at the top of the openSource section');
$navChild.css('background-color', 'green');
}
}) /* End of scroll function */
})
main.haml
%nav
%ul.navigation-flex
%li
%a.logo{href:"index.html"} Home
%li
%a{href: "#about"} About
%li
%a{href: "#portfolio"} Work
%li
%a{href: "#labs"} Labs
%li
%a{href: "#contact"} Contact
%section#portfolio
%article.article--fritmark
.article--fritmark__img-container
.window--outer.isHidden
%span.btns
%span.browser-red
%span.browser-yellow
%span.browser-green
%span.newTab
%img.article--fritmark__img{src: "/img/screenshoots/favs.png", alt: "favs" }/
%section#openSource
%h1.section-subheading Open Source Contributions
%h1.section-subheading Github Chart
First of all, instead of attaching to the scroll event (which gets called a ridiculously enormous number of times in a very short timespan), attach to an interval (in my example below, the interval is every 5 milliseconds).
getBoundingClientRect().top is a good way to get the y position of an element in your page. jQuery has shortcuts I'm sure, but I just went for a vanilla JS solution here.
document.body.scrollTop is a good way to get the scroll position on the page. It compares well with the bounding rectangle top of elements on the page.
Let the following code serve as a code reference for you to be able to find an effective way to solve your particular problem.
var nav = document.getElementById("nav"),
about = document.getElementById("about"),
work = document.getElementById("portfolio"),
labs = document.getElementById("labs"),
contact = document.getElementById("contact");
var aboutTop = about.getBoundingClientRect().top,
workTop = work.getBoundingClientRect().top,
labsTop = labs.getBoundingClientRect().top,
contactTop = contact.getBoundingClientRect().top;
var scroller = setInterval(function() {
var scrollTop = document.body.scrollTop;
var offset = 20; // So the color changes just a bit before reaching the position
scrollTop = scrollTop + offset;
if (scrollTop < aboutTop) {
nav.style['background-color'] = "#f0f0f0";
} else if (scrollTop<workTop && scrollTop>=aboutTop) {
nav.style['background-color'] = "red";
} else if (scrollTop<labsTop && scrollTop>=workTop) {
nav.style['background-color'] = "green";
} else if (scrollTop<contactTop && scrollTop>=labsTop) {
nav.style['background-color'] = "black";
} else if (scrollTop>=contactTop) {
nav.style['background-color'] = "blue";
}
}, 5);
body {
padding-top: 40px;
}
nav {
background-color: #f0f0f0;
padding: 5px 10px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
nav ul {
padding: 0;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 0 5px;
}
nav ul li a {
text-decoration: none;
color: white;
}
nav ul li a:hover {
text-decoration: underline;
}
.anchor {
display: block;
position: relative;
top: -55px;
visibility: hidden;
}
<nav id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Labs</li>
<li>Contact</li>
</ul>
</nav>
<a class="anchor" id="about"></a>
<section id="about-section">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ipsum mi, auctor quis lobortis at, rutrum sed ante. Etiam ipsum nisi, lobortis eget sem non, iaculis consectetur diam. Vestibulum accumsan diam nec luctus lobortis. Donec rhoncus est vitae diam ultrices, at gravida purus ultrices. Morbi blandit enim turpis, sit amet aliquam urna convallis et. Proin eleifend, nibh non sodales hendrerit, massa ex consequat sem, vel cursus ante enim ac ex. Suspendisse pellentesque dui felis, non condimentum nunc vehicula vitae. Suspendisse laoreet, dui ut fringilla gravida, arcu quam pharetra erat, nec maximus enim leo quis nisl. Aliquam sit amet euismod mi. Pellentesque sollicitudin, arcu id malesuada facilisis, magna mi lobortis mi, sit amet dictum elit lorem sit amet augue. Praesent mauris tortor, ullamcorper in laoreet et, malesuada vel lectus.</p>
<p>Mauris quis tincidunt ipsum, id auctor dui. Phasellus vel quam quam. Nulla facilisi. Duis ullamcorper tempor varius. Praesent cursus venenatis libero vitae mattis. Suspendisse potenti. Vivamus convallis ullamcorper condimentum. Fusce vel semper urna. Donec ac lacus magna. Sed imperdiet dolor ut urna accumsan hendrerit. Etiam ac ipsum vitae nisi egestas pellentesque. Ut vitae vestibulum purus. Aliquam aliquet tristique scelerisque.</p>
<p>Donec viverra hendrerit congue. Nam consequat justo non ligula feugiat, cursus hendrerit urna ornare. Pellentesque pellentesque metus non orci fringilla, id eleifend lectus pharetra. Integer scelerisque leo ex, sed imperdiet enim blandit a. Nam eget ante sit amet libero elementum vulputate in vitae velit. Ut quis lobortis sapien, nec volutpat neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc convallis mi et quam malesuada euismod. Mauris posuere massa odio, dictum venenatis tellus feugiat ut. Etiam bibendum tellus nulla, pretium venenatis erat pellentesque sed. Phasellus viverra eu enim non egestas. Nullam aliquam sed metus a volutpat.</p>
<p>Mauris quis eros non orci varius lacinia. Morbi aliquet consectetur neque malesuada tincidunt. Morbi ornare rhoncus risus. Mauris condimentum arcu vel tincidunt bibendum. Curabitur magna tortor, sollicitudin vitae dolor sit amet, lobortis luctus felis. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur nec enim ut elit pretium blandit eget convallis lacus. Suspendisse aliquet mattis tortor, nec tincidunt mauris suscipit at. Etiam pharetra lectus sed pharetra congue. Integer molestie arcu ut enim dignissim mollis. Mauris vitae luctus dolor, a sollicitudin magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam enim felis, suscipit id felis lobortis, fringilla elementum erat. Praesent sagittis, sapien eu feugiat ultricies, mi metus egestas augue, vitae vulputate diam arcu vitae felis.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu pulvinar purus. Quisque dictum accumsan congue. Etiam mollis diam nulla, in vulputate dui blandit a. Aliquam diam libero, dignissim id erat vitae, laoreet semper eros. Fusce iaculis rhoncus leo, quis scelerisque metus placerat ac. Etiam tellus nunc, congue ac euismod ut, convallis eu velit.</p>
</section>
<a class="anchor" id="portfolio"></a>
<section id="portfolio-section">
<h1>Work</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ipsum mi, auctor quis lobortis at, rutrum sed ante. Etiam ipsum nisi, lobortis eget sem non, iaculis consectetur diam. Vestibulum accumsan diam nec luctus lobortis. Donec rhoncus est vitae diam ultrices, at gravida purus ultrices. Morbi blandit enim turpis, sit amet aliquam urna convallis et. Proin eleifend, nibh non sodales hendrerit, massa ex consequat sem, vel cursus ante enim ac ex. Suspendisse pellentesque dui felis, non condimentum nunc vehicula vitae. Suspendisse laoreet, dui ut fringilla gravida, arcu quam pharetra erat, nec maximus enim leo quis nisl. Aliquam sit amet euismod mi. Pellentesque sollicitudin, arcu id malesuada facilisis, magna mi lobortis mi, sit amet dictum elit lorem sit amet augue. Praesent mauris tortor, ullamcorper in laoreet et, malesuada vel lectus.</p>
<p>Mauris quis tincidunt ipsum, id auctor dui. Phasellus vel quam quam. Nulla facilisi. Duis ullamcorper tempor varius. Praesent cursus venenatis libero vitae mattis. Suspendisse potenti. Vivamus convallis ullamcorper condimentum. Fusce vel semper urna. Donec ac lacus magna. Sed imperdiet dolor ut urna accumsan hendrerit. Etiam ac ipsum vitae nisi egestas pellentesque. Ut vitae vestibulum purus. Aliquam aliquet tristique scelerisque.</p>
<p>Donec viverra hendrerit congue. Nam consequat justo non ligula feugiat, cursus hendrerit urna ornare. Pellentesque pellentesque metus non orci fringilla, id eleifend lectus pharetra. Integer scelerisque leo ex, sed imperdiet enim blandit a. Nam eget ante sit amet libero elementum vulputate in vitae velit. Ut quis lobortis sapien, nec volutpat neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc convallis mi et quam malesuada euismod. Mauris posuere massa odio, dictum venenatis tellus feugiat ut. Etiam bibendum tellus nulla, pretium venenatis erat pellentesque sed. Phasellus viverra eu enim non egestas. Nullam aliquam sed metus a volutpat.</p>
<p>Mauris quis eros non orci varius lacinia. Morbi aliquet consectetur neque malesuada tincidunt. Morbi ornare rhoncus risus. Mauris condimentum arcu vel tincidunt bibendum. Curabitur magna tortor, sollicitudin vitae dolor sit amet, lobortis luctus felis. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur nec enim ut elit pretium blandit eget convallis lacus. Suspendisse aliquet mattis tortor, nec tincidunt mauris suscipit at. Etiam pharetra lectus sed pharetra congue. Integer molestie arcu ut enim dignissim mollis. Mauris vitae luctus dolor, a sollicitudin magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam enim felis, suscipit id felis lobortis, fringilla elementum erat. Praesent sagittis, sapien eu feugiat ultricies, mi metus egestas augue, vitae vulputate diam arcu vitae felis.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu pulvinar purus. Quisque dictum accumsan congue. Etiam mollis diam nulla, in vulputate dui blandit a. Aliquam diam libero, dignissim id erat vitae, laoreet semper eros. Fusce iaculis rhoncus leo, quis scelerisque metus placerat ac. Etiam tellus nunc, congue ac euismod ut, convallis eu velit.</p>
</section>
<a class="anchor" id="labs"></a>
<section id="labs-section">
<h1>Labs</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ipsum mi, auctor quis lobortis at, rutrum sed ante. Etiam ipsum nisi, lobortis eget sem non, iaculis consectetur diam. Vestibulum accumsan diam nec luctus lobortis. Donec rhoncus est vitae diam ultrices, at gravida purus ultrices. Morbi blandit enim turpis, sit amet aliquam urna convallis et. Proin eleifend, nibh non sodales hendrerit, massa ex consequat sem, vel cursus ante enim ac ex. Suspendisse pellentesque dui felis, non condimentum nunc vehicula vitae. Suspendisse laoreet, dui ut fringilla gravida, arcu quam pharetra erat, nec maximus enim leo quis nisl. Aliquam sit amet euismod mi. Pellentesque sollicitudin, arcu id malesuada facilisis, magna mi lobortis mi, sit amet dictum elit lorem sit amet augue. Praesent mauris tortor, ullamcorper in laoreet et, malesuada vel lectus.</p>
<p>Mauris quis tincidunt ipsum, id auctor dui. Phasellus vel quam quam. Nulla facilisi. Duis ullamcorper tempor varius. Praesent cursus venenatis libero vitae mattis. Suspendisse potenti. Vivamus convallis ullamcorper condimentum. Fusce vel semper urna. Donec ac lacus magna. Sed imperdiet dolor ut urna accumsan hendrerit. Etiam ac ipsum vitae nisi egestas pellentesque. Ut vitae vestibulum purus. Aliquam aliquet tristique scelerisque.</p>
<p>Donec viverra hendrerit congue. Nam consequat justo non ligula feugiat, cursus hendrerit urna ornare. Pellentesque pellentesque metus non orci fringilla, id eleifend lectus pharetra. Integer scelerisque leo ex, sed imperdiet enim blandit a. Nam eget ante sit amet libero elementum vulputate in vitae velit. Ut quis lobortis sapien, nec volutpat neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc convallis mi et quam malesuada euismod. Mauris posuere massa odio, dictum venenatis tellus feugiat ut. Etiam bibendum tellus nulla, pretium venenatis erat pellentesque sed. Phasellus viverra eu enim non egestas. Nullam aliquam sed metus a volutpat.</p>
<p>Mauris quis eros non orci varius lacinia. Morbi aliquet consectetur neque malesuada tincidunt. Morbi ornare rhoncus risus. Mauris condimentum arcu vel tincidunt bibendum. Curabitur magna tortor, sollicitudin vitae dolor sit amet, lobortis luctus felis. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur nec enim ut elit pretium blandit eget convallis lacus. Suspendisse aliquet mattis tortor, nec tincidunt mauris suscipit at. Etiam pharetra lectus sed pharetra congue. Integer molestie arcu ut enim dignissim mollis. Mauris vitae luctus dolor, a sollicitudin magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam enim felis, suscipit id felis lobortis, fringilla elementum erat. Praesent sagittis, sapien eu feugiat ultricies, mi metus egestas augue, vitae vulputate diam arcu vitae felis.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu pulvinar purus. Quisque dictum accumsan congue. Etiam mollis diam nulla, in vulputate dui blandit a. Aliquam diam libero, dignissim id erat vitae, laoreet semper eros. Fusce iaculis rhoncus leo, quis scelerisque metus placerat ac. Etiam tellus nunc, congue ac euismod ut, convallis eu velit.</p>
</section>
<a class="anchor" id="contact"></a>
<section id="contact-section">
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ipsum mi, auctor quis lobortis at, rutrum sed ante. Etiam ipsum nisi, lobortis eget sem non, iaculis consectetur diam. Vestibulum accumsan diam nec luctus lobortis. Donec rhoncus est vitae diam ultrices, at gravida purus ultrices. Morbi blandit enim turpis, sit amet aliquam urna convallis et. Proin eleifend, nibh non sodales hendrerit, massa ex consequat sem, vel cursus ante enim ac ex. Suspendisse pellentesque dui felis, non condimentum nunc vehicula vitae. Suspendisse laoreet, dui ut fringilla gravida, arcu quam pharetra erat, nec maximus enim leo quis nisl. Aliquam sit amet euismod mi. Pellentesque sollicitudin, arcu id malesuada facilisis, magna mi lobortis mi, sit amet dictum elit lorem sit amet augue. Praesent mauris tortor, ullamcorper in laoreet et, malesuada vel lectus.</p>
<p>Mauris quis tincidunt ipsum, id auctor dui. Phasellus vel quam quam. Nulla facilisi. Duis ullamcorper tempor varius. Praesent cursus venenatis libero vitae mattis. Suspendisse potenti. Vivamus convallis ullamcorper condimentum. Fusce vel semper urna. Donec ac lacus magna. Sed imperdiet dolor ut urna accumsan hendrerit. Etiam ac ipsum vitae nisi egestas pellentesque. Ut vitae vestibulum purus. Aliquam aliquet tristique scelerisque.</p>
<p>Donec viverra hendrerit congue. Nam consequat justo non ligula feugiat, cursus hendrerit urna ornare. Pellentesque pellentesque metus non orci fringilla, id eleifend lectus pharetra. Integer scelerisque leo ex, sed imperdiet enim blandit a. Nam eget ante sit amet libero elementum vulputate in vitae velit. Ut quis lobortis sapien, nec volutpat neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc convallis mi et quam malesuada euismod. Mauris posuere massa odio, dictum venenatis tellus feugiat ut. Etiam bibendum tellus nulla, pretium venenatis erat pellentesque sed. Phasellus viverra eu enim non egestas. Nullam aliquam sed metus a volutpat.</p>
<p>Mauris quis eros non orci varius lacinia. Morbi aliquet consectetur neque malesuada tincidunt. Morbi ornare rhoncus risus. Mauris condimentum arcu vel tincidunt bibendum. Curabitur magna tortor, sollicitudin vitae dolor sit amet, lobortis luctus felis. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur nec enim ut elit pretium blandit eget convallis lacus. Suspendisse aliquet mattis tortor, nec tincidunt mauris suscipit at. Etiam pharetra lectus sed pharetra congue. Integer molestie arcu ut enim dignissim mollis. Mauris vitae luctus dolor, a sollicitudin magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam enim felis, suscipit id felis lobortis, fringilla elementum erat. Praesent sagittis, sapien eu feugiat ultricies, mi metus egestas augue, vitae vulputate diam arcu vitae felis.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu pulvinar purus. Quisque dictum accumsan congue. Etiam mollis diam nulla, in vulputate dui blandit a. Aliquam diam libero, dignissim id erat vitae, laoreet semper eros. Fusce iaculis rhoncus leo, quis scelerisque metus placerat ac. Etiam tellus nunc, congue ac euismod ut, convallis eu velit.</p>
</section>
Have seen that in the code of someone else:
html {
margin-left: calc(100vw - 100%);
}
It avoids a horizontal "jumping" when content is added dynamically. "Jumping" because a vertical scroll bar appears on the right side of the screen.
I've made this demo:
(function() {
var btn = document.querySelector('button');
var btn2 = document.querySelector('button:nth-of-type(2)');
var div = document.querySelector('.content');
btn2.addEventListener('click', function() {
div.innerHTML = ''
});
btn.addEventListener('click', function() {
div.innerHTML = '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst.</p>'
});
})();
html {
margin-left: calc(100vw - 100%);
}
.wrapper {
margin: 50px auto;
width: 500px;
}
.content {
padding: 10px 30px;
background-color: #efefef;
}
<div class="wrapper">
<button>Add</button>
<button>Remove</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis.</p>
</div>
</div>
It works. No doubt.
Version without "margin-left" and appearing scroll bar:
(function() {
var btn = document.querySelector('button');
var btn2 = document.querySelector('button:nth-of-type(2)');
var div = document.querySelector('.content');
btn2.addEventListener('click', function() {
div.innerHTML = ''
});
btn.addEventListener('click', function() {
div.innerHTML = '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst.</p>'
});
})();
.wrapper {
margin: 50px auto;
width: 500px;
}
.content {
padding: 10px 30px;
background-color: #efefef;
}
<div class="wrapper">
<button>Add</button>
<button>Remove</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis.</p>
</div>
</div>
But I have no idea how the trick works.
Because I consider it weird using stuff which I don't understand:
Can anyone explain me what happens there?
It's effectively calculating the width of the scrollbar and adding the equivalent padding. The viewport width (vw) includes the space taken up by the scrollbar, while the percent width (%) does not. Subtracting the two and applying the resulting margin ensures the content's width does not change as the scrollbar appears.
So I'd like to build an indicator in a fixed nav bar that shows a user which section of a page they are on, and changes appropriately as they scroll, essentially recreating this Bootstrap effect.
Here's what I have so far:
HTML
<li class='page-nav' data-dest='thing1'><a>Event Info</a></li>
<li class='page-nav' data-dest='thing2'><a>Venue</a></li>
JS
var sections = [];
$('.page-nav').each(function() {
var destination = $(this).data('dest');
sections.push('#'+destination);
})
This gives me an array like this:
["#thing1", "#thing2"]
How could I then write a window.scroll function to watch if any of the DOM elements from the array enter scrollspy? Something like:
$(window).scroll(function () {
($(any-of-the-sections).on('scrollSpy:enter', function() {
$(whichever-section-entered).addClass('active');
})
})
Try the following:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
</head>
<body>
<ul>
<li class='page-nav' data-dest='thing1'>Event Info</li>
<li class='page-nav' data-dest='thing2'>Venue</li>
</ul>
<hr>
<div id="thing1">
<p>Sed suscipit libero eros, ut dictum orci ullamcorper eu. Suspendisse hendrerit arcu felis, eget fermentum erat vulputate vitae. In sagittis sapien sed ex maximus commodo. Maecenas ultrices, ex eu commodo iaculis, massa tortor posuere lorem, sit amet sodales purus odio pellentesque nunc. Donec tellus enim, finibus id tincidunt et, vestibulum a justo. Morbi venenatis sapien sit amet interdum dictum. Vivamus et diam justo. Nunc ultrices placerat nibh, in convallis justo efficitur a. Morbi ut pharetra urna. Vestibulum id nulla id tellus fringilla mollis in non lorem. Ut vitae diam accumsan, finibus velit eget, cursus orci. Ut sem enim, mollis ut ullamcorper quis, scelerisque vitae ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut enim molestie, ullamcorper eros in, vehicula enim. Proin id blandit turpis, sed varius dui. Suspendisse sodales nec nisi interdum aliquam. Cras auctor orci orci. Mauris sit amet iaculis leo, eget aliquam turpis. Proin ac dapibus mi. Nullam arcu risus, elementum ut felis et, pellentesque aliquet felis. Proin interdum luctus aliquet.</p>
<p>Curabitur laoreet, mi scelerisque pharetra consequat, ex urna volutpat ligula, eu sodales nisi felis nec tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus libero neque, dictum in metus vel, lobortis sodales odio. Nullam vestibulum at dolor et semper. Sed ac nibh malesuada, consectetur est ut, gravida dolor. Etiam rhoncus ultricies arcu sed pretium. Curabitur accumsan vel erat ac porttitor.</p>
<p>Proin nec lorem magna. Nullam lectus ex, rhoncus non libero ornare, placerat pharetra turpis. Sed commodo dui ut dictum ullamcorper. Nunc dui mi, iaculis non elit ac, pretium mattis nunc. Curabitur interdum dignissim quam, quis vulputate lectus. Sed enim massa, faucibus quis ante ac, eleifend scelerisque velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam blandit accumsan rhoncus. Donec sagittis egestas tellus, non scelerisque dolor commodo porta. Ut vehicula suscipit orci vel bibendum. Nulla facilisi. Cras sit amet molestie urna, quis blandit metus. Sed a arcu massa. Integer varius finibus neque in venenatis.</p>
<p>Sed suscipit libero eros, ut dictum orci ullamcorper eu. Suspendisse hendrerit arcu felis, eget fermentum erat vulputate vitae. In sagittis sapien sed ex maximus commodo. Maecenas ultrices, ex eu commodo iaculis, massa tortor posuere lorem, sit amet sodales purus odio pellentesque nunc. Donec tellus enim, finibus id tincidunt et, vestibulum a justo. Morbi venenatis sapien sit amet interdum dictum. Vivamus et diam justo. Nunc ultrices placerat nibh, in convallis justo efficitur a. Morbi ut pharetra urna. Vestibulum id nulla id tellus fringilla mollis in non lorem. Ut vitae diam accumsan, finibus velit eget, cursus orci. Ut sem enim, mollis ut ullamcorper quis, scelerisque vitae ex.</p>
</div>
<hr>
<div id="thing2">
<p>Mauris in lacus metus. Sed vitae aliquet ligula. Sed eget arcu ornare lacus efficitur interdum quis at dui. Cras rhoncus, odio eget ultricies sollicitudin, sem sapien scelerisque leo, sit amet auctor nibh risus at erat. Sed vitae metus pretium neque porttitor sollicitudin pellentesque laoreet lacus. Donec luctus tellus et maximus venenatis. Nulla eget aliquet nulla, aliquet cursus purus. In viverra erat a pharetra egestas. In id faucibus velit, et sagittis ex. Aliquam ut semper nunc. Sed id tempus nisl. Nunc tincidunt porta velit, sit amet sagittis velit porttitor ut. Cras feugiat pulvinar augue in consectetur. Praesent quis nisl purus. Suspendisse aliquet metus eros, a aliquet risus viverra consectetur. Aliquam a nulla sit amet erat iaculis facilisis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut enim molestie, ullamcorper eros in, vehicula enim. Proin id blandit turpis, sed varius dui. Suspendisse sodales nec nisi interdum aliquam. Cras auctor orci orci. Mauris sit amet iaculis leo, eget aliquam turpis. Proin ac dapibus mi. Nullam arcu risus, elementum ut felis et, pellentesque aliquet felis. Proin interdum luctus aliquet.</p>
<p>Curabitur laoreet, mi scelerisque pharetra consequat, ex urna volutpat ligula, eu sodales nisi felis nec tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus libero neque, dictum in metus vel, lobortis sodales odio. Nullam vestibulum at dolor et semper. Sed ac nibh malesuada, consectetur est ut, gravida dolor. Etiam rhoncus ultricies arcu sed pretium. Curabitur accumsan vel erat ac porttitor.</p>
<p>Proin nec lorem magna. Nullam lectus ex, rhoncus non libero ornare, placerat pharetra turpis. Sed commodo dui ut dictum ullamcorper. Nunc dui mi, iaculis non elit ac, pretium mattis nunc. Curabitur interdum dignissim quam, quis vulputate lectus. Sed enim massa, faucibus quis ante ac, eleifend scelerisque velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam blandit accumsan rhoncus. Donec sagittis egestas tellus, non scelerisque dolor commodo porta. Ut vehicula suscipit orci vel bibendum. Nulla facilisi. Cras sit amet molestie urna, quis blandit metus. Sed a arcu massa. Integer varius finibus neque in venenatis.</p>
<p>Sed suscipit libero eros, ut dictum orci ullamcorper eu. Suspendisse hendrerit arcu felis, eget fermentum erat vulputate vitae. In sagittis sapien sed ex maximus commodo. Maecenas ultrices, ex eu commodo iaculis, massa tortor posuere lorem, sit amet sodales purus odio pellentesque nunc. Donec tellus enim, finibus id tincidunt et, vestibulum a justo. Morbi venenatis sapien sit amet interdum dictum. Vivamus et diam justo. Nunc ultrices placerat nibh, in convallis justo efficitur a. Morbi ut pharetra urna. Vestibulum id nulla id tellus fringilla mollis in non lorem. Ut vitae diam accumsan, finibus velit eget, cursus orci. Ut sem enim, mollis ut ullamcorper quis, scelerisque vitae ex.</p>
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="scrollspy.js"></script>
<script>
var sections = [];
$('.page-nav').each(function() {
var destination = $(this).data('dest');
sections.push('#'+destination);
});
$.each(sections, function(index, value) {
var section = $(sections[index]);
$(section).scrollSpy();
$(section).on('scrollSpy:enter', function() {
$(this).addClass('active');
});
$(section).on('scrollSpy:exit', function() {
$(this).removeClass('active');
});
});
</script>
</body>
</html>
In the above code, it's possible for more than one section to be active at any given time. Just because #thing2 has become visible doesn't mean that #thing1 has necessarily scrolled outside of the viewport yet.
If you want to ensure that only one section has the active class at any given time, then you can delete the scrollSpy:exit event handler and modify the scrollSpy:enter event handler to look like this:
$(section).on('scrollSpy:enter', function() {
$.each(sections, function(index, value) {
$(sections[index]).removeClass('active');
});
$(this).addClass('active');
});
In this modified version of the code, when a section scrolls into view, we remove the active class from every section before adding it to the one that has scrolled into view.
I just want to scroll the div ( overflow scroll ) by only the bar in right hand side not on mouse roll, touch.
body
{
height:1000px
}
.news_list {
display: block;
overflow-y: scroll;
height: 200px;
width:200px;
margin:auto;
border:solid 1px;
}
<body><div class="news_list">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</body>
Prevent mousewheel event default action using event.preventDefault() or by returning false return false;
$('.news_list').on('mousewheel', function(e) {
e.preventDefault();
});
body {
height: 1000px
}
.news_list {
display: block;
overflow-y: scroll;
height: 200px;
width: 200px;
margin: auto;
border: solid 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="news_list">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</body>
demo
$(".news_list").bind("mousewheel", function () {
return false;
});
Cancel the mousewheel on the div with class news_list