how can I give an element with class .navbar fixed position and make it stay on top of the viewport as long as the user scrolls past it using JQuery. Is it possible to do?
Are you looking to pin the navbar when you reach the top of the element while scrolling?
CSS
#navbar.sticky {
position: fixed;
top: 0;
}
JS
var navbar = document.getElementById('navbar'),
navbarOffset = navbar.getBoundingClientRect();
window.addEventListener('scroll', function(e){
var offsetTop = navbarOffset.top;
if(window.pageYOffset > offsetTop){
navbar.classList.add('sticky');
}else{
navbar.classList.remove('sticky');
}
});
DEMO
If you don't need to support IE, you can achieve this by using CSS selector position: sticky on the navigation bar.
body {
height: 2000px;
}
.header {
height: 60px;
background: #0099ff;
position: sticky;
top: 15px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur corrupti harum adipisci inventore quisquam? Impedit fugit ratione numquam debitis, sed molestiae nostrum dolor hic a cumque perspiciatis nesciunt dolorum similique corrupti explicabo harum accusamus eaque magni quibusdam ad autem illum eligendi. Minus amet a labore libero beatae, molestias. Id veritatis dolorum commodi quis porro libero rem magnam cum itaque blanditiis illum maxime non voluptas esse, saepe qui quia sapiente nostrum fugiat inventore eius natus quisquam quod dolore. Animi, in cumque earum, at ullam ratione repellat inventore asperiores ab et consequatur optio distinctio, ipsa beatae autem repudiandae consequuntur nesciunt voluptatem cum.<p>
<header class="header"></header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur corrupti harum adipisci inventore quisquam? Impedit fugit ratione numquam debitis, sed molestiae nostrum dolor hic a cumque perspiciatis nesciunt dolorum similique corrupti explicabo harum accusamus eaque magni quibusdam ad autem illum eligendi. Minus amet a labore libero beatae, molestias. Id veritatis dolorum commodi quis porro libero rem magnam cum itaque blanditiis illum maxime non voluptas esse, saepe qui quia sapiente nostrum fugiat inventore eius natus quisquam quod dolore. Animi, in cumque earum, at ullam ratione repellat inventore asperiores ab et consequatur optio distinctio, ipsa beatae autem repudiandae consequuntur nesciunt voluptatem cum.<p>
Related
I have a simple paragraph in html with overflow: scroll; in the css. I then do a simple document.getElementById(id).innerHTML = new HTML and change the initially little text to a much longer paragraph. The scroll feature then doesn't 'update' (not sure if this is correct terminology). I tried just adding the class again in jQuery but that bodge failed, what is the 'correct' way to do this.
You need to define max-height of p tag & overflow-y:auto for vertically scrolling.
function addText(id){
document.getElementById(id).innerHTML = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias praesentium veniam, fugit, id asperiores pariatur neque, ullam iste dignissimos natus molestias ab. Fugiat voluptates in soluta porro inventore minima similique deserunt quidem aliquid rem fugit corporis, qui error laboriosam atque, esse neque libero quam quisquam doloremque. Commodi aliquid, id asperiores ullam est error consequuntur labore vel cupiditate, assumenda, neque beatae tempora amet. Amet, animi provident explicabo ea deserunt dolore itaque assumenda ipsa vitae numquam suscipit saepe eius deleniti repellat exercitationem libero maiores aliquid ducimus odio nesciunt placeat esse quaerat iure! Amet consequatur quasi ab. Consequuntur inventore eum dolor quos deleniti nisi nostrum, dignissimos laborum reprehenderit mollitia in. Inventore labore saepe distinctio consequuntur non assumenda necessitatibus recusandae fugiat exercitationem, ipsa nesciunt ducimus reprehenderit sapiente earum voluptatum autem sequi blanditiis similique alias quasi voluptatem. Doloribus reprehenderit, quos vitae omnis sunt doloremque? Eligendi vitae distinctio ea ex alias commodi, pariatur, unde laborum sint molestias ipsa. Doloremque doloribus necessitatibus blanditiis laudantium, iusto eius perspiciatis odio voluptate maxime sit, maiores aspernatur delectus adipisci illum explicabo praesentium, veniam porro exercitationem magni ullam libero distinctio. Deleniti porro eius, quaerat consequatur a illo repellendus consectetur nesciunt aliquid adipisci dignissimos ratione? Dolorem iure magnam repellendus! Illum sit quam impedit unde id provident sunt, blanditiis iusto rerum omnis architecto, voluptatum perspiciatis distinctio praesentium quia. Eaque a minus assumenda aliquam enim qui totam consequuntur veniam sed vero. Maiores eveniet minus exercitationem tempore dolor minima magnam iure! Nisi, voluptas. Dicta iste quia ducimus minus suscipit molestiae quaerat delectus temporibus quas, maiores harum eum tempore dolorum cumque in laborum est aliquam, beatae mollitia ea vitae! Quam ipsa nostrum eligendi, obcaecati voluptate recusandae placeat iste libero distinctio quisquam? Molestias distinctio eligendi alias voluptate sunt cum, voluptatum adipisci aliquid. Consequatur enim minima incidunt illum corrupti porro ipsam dolorem similique quia nihil! Enim, sapiente? Enim, illo!';
}
p{
border: 1px solid #ccc;
width: 200px;
max-height: 140px;
padding: 15px;
overflow: hidden;
overflow-y: auto;
}
<p id="paragraph">This is sort text...</p>
<button type="button" onclick="addText('paragraph')">Add More Text</button>
Here is my test code:
<div id="scrollable" style="width:100%; height:100px; overflow: scroll">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolorum esse,
illum nostrum placeat quia? Animi corporis explicabo modi neque porro possimus
quos totam. Accusamus ad aliquam animi, aperiam atque beatae consectetur
debitis deleniti dignissimos doloremque doloribus ducimus ea error est eveniet
fugit id iste itaque mollitia nostrum officia omnis optio quam quidem saepe
sapiente ullam voluptatibus. A ad aliquam at aut, blanditiis commodi
consectetur consequuntur delectus dignissimos ducimus ea esse est fuga fugiat,
fugit illo inventore ipsa iusto laboriosam libero minima minus nesciunt nulla
officia quaerat quam quidem quo recusandae reprehenderit similique soluta
tempora, temporibus ut vel veritatis vero voluptatem. Ab culpa dolore eveniet
exercitationem explicabo incidunt itaque laudantium molestiae nisi nobis
nostrum, numquam possimus quam, quas quis, quisquam recusandae sed voluptatem.
Deleniti esse iure nisi odio ullam. Autem ducimus eius enim inventore placeat
possimus repudiandae voluptates? A adipisci cumque doloribus eligendi, eos
eveniet harum laborum minus nam optio quae sed voluptas voluptates.
Accusantium architecto, at dolor dolore eligendi incidunt ipsa, ipsum iure
mollitia, nam nesciunt quo repellendus reprehenderit rerum sapiente similique
voluptas. Eos laborum optio quibusdam voluptatum. Deserunt dolor doloribus
enim minus praesentium reiciendis soluta tenetur. Ad consectetur consequuntur
cumque iure molestias nam perferendis placeat quibusdam soluta, voluptatum!
</div>
<script
type="text/javascript"
src="../node_modules/jquery/dist/jquery.js"
></script>
<script>
var scrollable = document.querySelector("#scrollable");
$(scrollable).on("scroll", ev => {
console.log(`container scroll top:${$(scrollable).scrollTop()}`);
console.log(`container scroll height:${$(scrollable).height()}`);
});
</script>
I'm confused, when i scroll to scrollable div bottom, the scroll top != scroll height
This should be correct.
container scroll height is the height of the window.
container scroll top is how far from the top of the content you've scrolled.
So if I load your content in my browser, and the container scroll height = 100, and I make the window narrower, then my container scroll height is still 100, I haven't changed the height of the window. But now you can scroll further down, so your container scroll top could change as you scroll further down.
I have a button that you click on and a div appears.
If you'll scroll down from an iPhone you'll see that it's not scrolling smoothly as it should. for some reason it's losing that behavior and I don't know why.
HTML
<button id="page1">Hey</button>
<div class="page1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sunt nemo, unde, nisi quisquam minus blanditiis rerum harum obcaecati, dolore perspiciatis? Ad nemo aperiam cumque a delectus facilis tempora architecto?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui laboriosam minus praesentium excepturi cumque culpa quibusdam, maiores odit cupiditate natus, possimus, libero repellendus sed doloribus animi eos cum dolorum at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis et hic tenetur velit iste dignissimos est suscipit ducimus facilis, quibusdam dicta iure quidem beatae quisquam sit quasi harum, provident nostrum at illum. Quisquam accusamus autem id dolorem harum aspernatur est impedit amet, asperiores praesentium, vitae molestiae repellendus natus velit libero ipsam, qui assumenda pariatur nulla dicta ea voluptatum. Dolorem eos officia, et nostrum numquam quasi hic corrupti fugit commodi beatae aliquid minima, vel dolores maiores ex! Quas soluta nemo quod, natus quo tenetur odio, repellendus iure amet fuga! Odit temporibus debitis voluptate blanditiis, veniam delectus minima dolores, commodi quas laborum nobis dolorem placeat ea, officia magnam totam fuga corporis cumque. Quos asperiores veritatis quo! Quo dolorum officiis temporibus repudiandae aliquam esse, ex expedita sed sequi corporis voluptatum ullam accusamus laboriosam quae, ducimus ea qui quia! Quis nostrum, distinctio maxime. Similique in assumenda ipsum officia incidunt rem ratione velit harum dolore labore id aperiam quaerat magnam iste ipsam, minima, rerum consequuntur earum modi molestiae dolorum optio temporibus! Adipisci optio ex, fugiat nostrum sint, sunt at. Reprehenderit autem mollitia earum, ipsa porro, tempora tenetur impedit omnis unde iure, alias vitae illo quod ab assumenda magnam molestias atque provident voluptatem laboriosam quae! Optio quisquam corporis beatae iure, natus, cumque porro, ullam dolorem illum odit quia itaque ut molestias voluptas. Architecto animi ratione, ad accusamus commodi fugit nemo laborum similique illum suscipit deleniti, sed deserunt? Quis nam quasi qui ab vel dignissimos vitae in, aspernatur soluta aliquam explicabo magni alias tempore, molestias facilis ducimus aut inventore neque animi hic. Soluta officiis exercitationem iure magnam earum facere provident, alias delectus explicabo quibusdam tempora amet aperiam, unde, vitae! Dolorem neque, commodi harum libero officiis explicabo perspiciatis ullam. Quisquam, nostrum illo cum hic eaque! Iste ut omnis ab accusantium eaque quaerat dolorum, nulla eius rerum est ipsa. Nostrum asperiores esse porro nam, sint minus ullam. Enim porro eveniet harum, ducimus veritatis eius natus non quo eaque ut repudiandae hic sunt dolores quibusdam maxime fugiat fugit distinctio! Inventore alias commodi perferendis minus sint ipsum officia quaerat aperiam sapiente in ratione, accusantium nobis eum et temporibus cum accusamus consectetur doloribus illum? Odio quisquam placeat deleniti. Ducimus accusantium at esse autem architecto incidunt omnis earum, ipsam dignissimos, dolorem ex quibusdam! Repellendus expedita unde, ullam, placeat, aut officia doloremque mollitia impedit quidem sequi maxime. Cumque sit eaque repellendus perferendis, accusamus deserunt iusto error quod magni, quo vero unde molestiae corporis suscipit?</p>
</div>
CSS
.page1 {
display:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
overflow:auto;
background:#039;
color:#fff;
padding:40px;
}
.noscrolling {
overflow:hidden;
}
button {
margin:30px;
}
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('button').click(function(){
var button_id = $(this).attr('id');
$('.'+button_id).fadeIn();
$('body').addClass('noscrolling');
});
});
</script>
Try adding this css.
.page1 {
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
I have a script that I run for showing my sticky header after scroll. I would like to display it after 300px. How can I achieve that?
<script type="text/javascript">
jQuery(function($){
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else {
$('header').removeClass("sticky");
}
});
});
</script>
If I understand you right, just replace $(this).scrollTop() > 1 with $(this).scrollTop() > 300
Demo: https://jsfiddle.net/VitFL/cgzr6k5t/
jQuery(function($){
$(window).scroll(function() {
if ($(this).scrollTop() > 300){
$('header').addClass("sticky");
}
else {
$('header').removeClass("sticky");
}
});
});
header {
width: 100%;
height: 40px;
background-color: red;
}
.sticky {
position: fixed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
</header>
<section class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus reiciendis ipsa, aliquam voluptatum qui et eos, omnis dolorum, iure dolores beatae modi, nihil aspernatur quibusdam nostrum dolor? Tenetur similique, nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus reiciendis ipsa, aliquam voluptatum qui et eos, omnis dolorum, iure dolores beatae modi, nihil aspernatur quibusdam nostrum dolor? Tenetur similique, nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam rem dolores ullam nostrum sint voluptas obcaecati amet aspernatur laudantium, necessitatibus ex deleniti. Accusantium fugit, natus maiores unde, quidem praesentium, laboriosam cumque cupiditate doloremque nulla quisquam pariatur consectetur accusamus dolores quas, itaque! Fuga expedita, maxime amet iste sequi quod delectus quaerat eligendi nisi similique, nemo sunt dignissimos repellendus dolorem laborum est vero quam, esse, culpa in soluta nesciunt. Soluta ipsa accusamus est placeat nostrum, nemo, nobis, et totam reprehenderit possimus eligendi! Suscipit vitae saepe quod eos aut magnam similique, voluptates, quibusdam debitis? Facere odio dicta dolore, enim rerum ex distinctio labore expedita! Assumenda doloribus quae repellat a, laboriosam, distinctio, rem repudiandae itaque, odio accusamus nisi repellendus deleniti explicabo ad facilis eum! Saepe magni necessitatibus obcaecati aspernatur! Dignissimos excepturi libero dolores nemo quia animi quas atque dolore sed optio beatae perspiciatis tempora impedit praesentium doloremque id ad doloribus reiciendis, recusandae itaque magni, reprehenderit? Explicabo cumque inventore tempore doloremque. Aliquam, consequatur animi soluta dolores expedita assumenda! Sit, maiores suscipit reiciendis dolor adipisci autem laudantium corporis quia excepturi. Animi consequuntur nostrum facilis ipsam sapiente, distinctio. Porro quisquam qui, praesentium aliquid, architecto magnam aliquam repellendus deleniti maiores ab ea illum necessitatibus dolorem. Architecto debitis, enim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam rem dolores ullam nostrum sint voluptas obcaecati amet aspernatur laudantium, necessitatibus ex deleniti. Accusantium fugit, natus maiores unde, quidem praesentium, laboriosam cumque cupiditate doloremque nulla quisquam pariatur consectetur accusamus dolores quas, itaque! Fuga expedita, maxime amet iste sequi quod delectus quaerat eligendi nisi similique, nemo sunt dignissimos repellendus dolorem laborum est vero quam, esse, culpa in soluta nesciunt. Soluta ipsa accusamus est placeat nostrum, nemo, nobis, et totam reprehenderit possimus eligendi! Suscipit vitae saepe quod eos aut magnam similique, voluptates, quibusdam debitis? Facere odio dicta dolore, enim rerum ex distinctio labore expedita! Assumenda doloribus quae repellat a, laboriosam, distinctio, rem repudiandae itaque, odio accusamus nisi repellendus deleniti explicabo ad facilis eum! Saepe magni necessitatibus obcaecati aspernatur! Dignissimos excepturi libero dolores nemo quia animi quas atque dolore sed optio beatae perspiciatis tempora impedit praesentium doloremque id ad doloribus reiciendis, recusandae itaque magni, reprehenderit? Explicabo cumque inventore tempore doloremque. Aliquam, consequatur animi soluta dolores expedita assumenda! Sit, maiores suscipit reiciendis dolor adipisci autem laudantium corporis quia excepturi. Animi consequuntur nostrum facilis ipsam sapiente, distinctio. Porro quisquam qui, praesentium aliquid, architecto magnam aliquam repellendus deleniti maiores ab ea illum necessitatibus dolorem. Architecto debitis, enim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste molestiae, sit assumenda quia temporibus qui vel ullam necessitatibus repellendus cupiditate tenetur beatae laudantium, eos voluptatem dolore quae, consequatur! Blanditiis esse ipsam impedit distinctio sequi quae praesentium deleniti doloremque repellat, temporibus tempora omnis labore enim assumenda voluptatem sapiente architecto incidunt neque aliquam corrupti fugiat facilis. Odit veniam illo magnam praesentium quasi quae maiores fuga eum. Accusamus aliquid tempora eum dolores eaque quasi omnis aut. Ea eos culpa dolorum, sint nobis suscipit quaerat harum, iure illo eligendi omnis nam dolorem itaque aliquam eaque voluptate praesentium possimus officia rerum mollitia nemo distinctio aperiam ratione quo. Optio assumenda cupiditate expedita quod aperiam illo blanditiis nisi, harum eos inventore nesciunt nobis tempora ipsum deleniti, accusantium suscipit deserunt voluptatibus porro in mollitia eum. Pariatur consequatur iste, veritatis quae maxime nisi magni dolores possimus quasi id. Inventore repellat reprehenderit fuga, eaque distinctio expedita fugiat. Facilis, repellendus, alias.</p>
</section>
If you want header to be hidden before you scroll to 300px, then make it display: none, and add to .sticky display: block:
header {
display: none;
width: 100%;
height: 40px;
background-color: red;
}
.sticky {
position: fixed;
display: block;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have got my header position: fixed; and height: 200px; and green color in the main position up in the website. How can I reduce the height to 100px; if when I scroll down the web page?
I has made some small JSFIDDLE so you can see it. http://fiddle.jshell.net/#&js=ybR4h7OViQ
The header is set up with 200px height. I just want to know what JS/Jquery code do I need to add here so it can go.
Are you looking for something like this?
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 5)
$("header").addClass("small");
else
$("header").removeClass("small");
});
});
* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';}
body {padding-top: 100px;}
p {margin: 0 0 10px;}
header {height: 100px; line-height: 100px; text-align: center; background-color: #ccf; position: fixed; left: 0; top: 0; right: 0; transition: all 0.5s ease;}
header.small {height: 50px; line-height: 50px;}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<header>
<h1>Hello</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus aliquam fugiat corporis ratione. Eius maiores qui unde aperiam officia, dolorum quo, hic animi harum natus optio adipisci ipsa ratione totam.</p>
<p>Pariatur repellendus repellat, dolores odio reprehenderit provident culpa nostrum molestias optio officia magni impedit iusto? Repellendus fugit est, dicta, non voluptatum similique perspiciatis facilis voluptates magnam. Veritatis iste quis corporis?</p>
<p>Repellat totam deleniti officia sunt amet nisi libero ad, sint quidem, inventore sequi dolorum quae cum suscipit, molestias eum velit quod cupiditate. Soluta doloremque quis laboriosam unde ad laudantium praesentium.</p>
<p>Laborum ab asperiores sequi, placeat expedita. Optio nostrum soluta temporibus numquam repellendus expedita, impedit ducimus reiciendis laudantium minima nobis harum adipisci labore vitae earum magni quo animi facere. Quas, fugit!</p>
<p>At excepturi eius architecto dolorum aliquid. Ex ullam repellendus non id nulla modi quasi numquam, consectetur nam! Cum tempora quisquam, officiis. Atque ipsa culpa saepe, officiis modi error tempora sint!</p>
<p>Ab minus, tempore! Modi nemo praesentium voluptatibus accusamus sit doloremque dignissimos facere illo dolor! Dicta hic consequatur sint voluptatum necessitatibus similique fugit culpa modi eius ab, maiores quam ipsa officia.</p>
<p>In vero minus, dolorum deserunt voluptatibus accusamus, mollitia quasi, sapiente dicta distinctio explicabo cupiditate autem nisi placeat dolores odit harum molestiae aspernatur! Porro, optio vero dolorum architecto cumque incidunt quasi!</p>
<p>Pariatur blanditiis et quod officiis illo iste numquam, temporibus, in neque doloremque. Facere dignissimos exercitationem nisi veritatis possimus vitae debitis quas animi natus excepturi fugit repellat, porro, voluptatum aliquid reiciendis.</p>
<p>Facere, laudantium. Eaque reprehenderit laudantium distinctio quos, in obcaecati fuga. Quia provident, temporibus voluptates, totam delectus nesciunt corrupti optio et voluptatem possimus facere tempore ad quod vel soluta velit itaque?</p>
<p>Quisquam, itaque tenetur accusantium nemo temporibus odit, id qui atque ab magnam sunt voluptas soluta deserunt impedit neque amet nesciunt eaque unde dignissimos. Sequi eligendi, quos consectetur, laborum commodi maxime.</p>
<p>Temporibus et facilis, ipsum aspernatur omnis provident aliquam illum neque laboriosam libero voluptatum voluptates dicta labore ut saepe harum consequuntur eligendi facere quibusdam dolores, ex reiciendis enim aut, impedit! Tempora.</p>
<p>Beatae, ullam, odit. Animi, maiores facere fuga et. Laborum quae sequi veritatis, incidunt dignissimos dolorem, labore, error maxime quam ullam modi fugit accusantium possimus architecto id blanditiis pariatur aperiam ducimus?</p>
<p>Illum magni porro consequatur veritatis earum. Illum delectus, earum quidem error facilis animi ad aperiam temporibus, nesciunt cum nemo fuga quod, assumenda alias ipsum atque. Animi beatae aliquid, voluptatum ratione!</p>
<p>Tempore architecto enim quibusdam, aperiam reprehenderit. Culpa laboriosam commodi ipsum cumque, suscipit cupiditate! Earum repellat totam quo eaque vitae, numquam natus laborum reprehenderit hic, rerum illo, nostrum nobis id. Odio?</p>
<p>In accusamus voluptatum alias doloremque repellat, minima at fugiat commodi praesentium perspiciatis similique quaerat, iste quibusdam, a consectetur ullam modi quod maiores nihil quam velit maxime ad. Ipsum, aut, architecto.</p>
Just do it like this:
var heightFromTop = 50, //Height from top where header will shrink
headerHeight = 100, //height that header will shrink to.
header = document.querySelector(".header"), //Selects .header element
defaultHeight = getComputedStyle(header).height; //Gets the default height of the element
window.onscroll = function() { //Runs function when you scroll window
if (document.documentElement.scrollTop > heightFromTop) header.style.height = headerHeight + "px"; //Checks if the body is scroll down more then heightFromTop
else header.style.height = defaultHeight + "px"; //Otherwise, set it to the default height
}
JSFiddle Demo