I created a sticky header on scroll. The only problem is that when I scroll down for 1000px, the class sticky is added to the header and after that, there is a little jump of the content at the same moment when the class sticky is added to the header. I think this becomes, because header doesn't exists anymore on that place in the markup visually.
I tried to add a specific height to the header. Also wrap a div around container, so the sub-header stays on that place, but with no success.
How should I fix this?
Live code: http://codepen.io/anon/pen/qbaQvL?editors=110
When the sticky activates you also need to set the margin-top of the about element equal to the height of the sticky.
It would be something like this:
if (windowPos >= content) {
$('#sub-header').addClass('sticky');
$('#about').addClass('sticky-active');
} else {
$('#sub-header').removeClass();
$('#about').removeClass();
}
#about.sticky-active {
margin-top: 96px;
}
I made a working version codepen too. You can see it here.
Just add padding to body, when creating sticky header:
JS:
if (windowPos >= content) {
$('#sub-header').addClass('sticky');
$('body').addClass('sticked');
} else {
$('#sub-header').removeClass();
$('body').removeClass('sticked');
}
CSS:
body.sticked {
padding-top: 96px;
}
You could just give the header an absolute positioning during the scrolling:
...
#sub-header {
position: absolute;
width: 100%;
}
#sub-header, #sub-header.sticky {
background: #FFF;
border-bottom: 1px solid #f0f0f0;
z-index: 2000;
}
...
... and add a padding to your sections:
section {
padding-top: 96px;
}
http://codepen.io/anon/pen/PZGxMZ
Related
What do i want to achive?
I want to remove a div which isnt visible(for the user not the css atribute) anymore on the screen because i let the html and body scroll to a div with jquery(scrollTop). Now i want to remove the div which was visible beforr i scrolled down with jquery.
Edit: After removing the .header div, the #begining should be the top of the page and the .header div should be removed forever.
What is the problem?
After i scrolled down and removed the div with the following line of code: $('.header').css('display','none'); the scroll position changes.
Code to scroll down and remove the div.
function scrollToBegining(){
$('html, body').animate({
scrollTop: $("#begining").offset().top
}, 750);
setTimeout(function(){
$('.header').css('display','none');
},750);
}
Problem visualized:
GIF of the problem (Watch to understand better)
This is odd, but I think a better choice is to slideUp the div instead of scrolling:
function scrollToBegining(){
$('.header').slideUp(750);
}
Obviously, rename the function since it's no longer scrolling.
You can use visibility: hidden to hide the div but reserve its space. Also, sometimes the scroll position has to be changed when you use display: none.
visibility: hidden
is what you are looking for, but another solution I use with this kind of issue is instead of scrolling down to your second div, have the initial div shrink its height in a uniform animation until it is 0. This prevents the weird shuddering scroll issue you are experiencing
document.querySelector('#header h1').addEventListener('click', closeHeader)
function closeHeader(){
document.querySelector('#header').classList.add("hidden");
}
#header {
height: 300px;
width: 100%;
background: red;
text-align: center;
}
#content {
height: 1000px;
width: 100%;
background: yellow;
text-align: center;
}
.hidden {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
<div id="header">
<h1>
HEADER
</h1>
</div>
<div id="content">
CONTENT
</div>
Question
I want the navBar to stick conditionally on scroll. However there are bugs I can not quite diagnose, as I am new to jQuery. What is preventing the nav bar from sticking conditionally on scroll?
The jQuery in the jsfiddle below will not run correctly, and after trying for awhile to make it work, I cannot seem to make it run. I've looked at other examples of this but I'd rather not change the jQuery entirely until I know the reason that my code does not work. I will not link the HTML as it full of Lorem Ipsum test text body. It is found in the JSFiddle link.
What is the error in the javascript that isn't making the navBar apply the sticky class?
Javascript
var navTop = $(".nav").offset().top;
var stickyNav = function(){
if ($(window).scrollTop() >= navTop){
$(".nav").addClass(".sticky")
} else {
$(".nav").removeClass(".sticky")
}
};
stickyNav();
$(window).scroll(function(){
stickyNav();
};
CSS
* {
margin: 0;
box-sizing: border-box;
}
.mainHeader {
width: 100%;
height: 20%;
background-color: rgb(62, 65, 66);
text-align: center;
font-family: "Helvetica Nue";
}
.navigation {
width 100%;
height 10%;
background-color: rgb(89, 127, 143);
position: relative;
}
.sticky {
position: fixed;
}
https://jsfiddle.net/11u1bj5j/
You have some bugs in your js code. Firstly, .nav should be nav since your <nav> element has a class of navigation. So, we'll grab it by the tag name instead. Secondly, .addClass() and .removeClass() don't need the period before the class name.
Here's the updated javascript:
var navTop = $("nav").offset().top;
var stickyNav = function(){
if ($(window).scrollTop() >= navTop){
$("nav").addClass("sticky");
} else {
$("nav").removeClass("sticky");
}
};
stickyNav();
$(window).scroll(function(){
stickyNav();
});
Here's an updated fiddle.
first of all you are adding/removing classes wrongly with jquery should be
.addClass("sticky") / .removeClass("sticky")
same with nav selection, there were some other small css problems too
here is working jsfiddle
I have a navbar that sticks to the top of the page when you scroll past it.
When this navbar is fixed to the top of the page, I would like a logo to appear.
The logo is inside the div #navlogo.
I currently have #navlogo set to display: none. I am thinking that when you scroll past 100px its display will need be set to display block or something similar.
I have tried a few things but i'm not very good at java and had no luck.
You can check out the JSFIDDLE here
This is the script I'm using to set my navbar to fixed
$(window).scroll(function() {
var nav = $('#custom-bootstrap-menu');
var body = $('body');
var top = 100;
if ($(window).scrollTop() >= top) {
nav.addClass('navbar-fixed-top');
body.addClass('padding-fifty');
} else {
nav.removeClass('navbar-fixed-top');
body.removeClass('padding-fifty');
}
});
and a little css
#logo {
height: 100px;
}
.padding-fifty {
padding-top: 50px;
}
#navlogo {
display: none;
}
As you can see it sets the nav to fixed, and compensates the page offset by adding 50px. I need something here that will set #navlogo to visible. Can anyone offer some assistance?
Thanks so much for your help!
You can set the css display property in your Javascript:
var logo = $('div#navlogo');
logo.css('display', 'block');
For example: https://jsfiddle.net/gx25ospo/3/
Try adding this style to your CSS at last:
.navbar-fixed-top #navlogo {
display:block;
}
Try this https://jsfiddle.net/gx25ospo/4/
.navbar-brand {
display: none;
}
.visible {
display: block;
}
JS
if ($(window).scrollTop() >= top) {
nav.addClass('navbar-fixed-top');
body.addClass('padding-fifty');
$('.navbar-brand').addClass('visible');
} else {
nav.removeClass('navbar-fixed-top');
body.removeClass('padding-fifty');
$('.navbar-brand').removeClass('visible');
}
I have a header, in which i put my h1 and h2 headings at top. The problem is that header scrolls along the scroll bar which is of course normal but i want to fixed it at some point when all the headings on header scroll away. At this point I want header to stop and stays fixed.
I already tried fixed position but of course it fixed heading as well which exactly I don't want.
I also tried this JavaScript but no luck.
JavaScript
$(window).scroll(function() {
var _height = 120 - (120 * $(this).scrollTop() / $('body').height());
if (_height >= 80) {
$('.header_container').height(_height);
}
});
and here qre my HTML and CSS codes respectively.
HTML
<div class="header_container" id="header_container">
<div id="header_titles">
<h1 class="homepage-heading">Browse</h1>
<h2 class="homepage-heading-subtle">GENRES & MOODS</h2>
</div>
</div>
CSS
#header_container {
background-color: black;
width: 100%;
height: 120px;
top: 0;
left: 0;
right: 0;
}
#header_titles {
position: absolute;
width: 100%;
font-size: 35px;
text-align: center;
padding-top: 10px;
}
So, let me see if I get this...you want your header to be scrolled normally with the page until a certain point where it becomes fixed?
EDIT
Ok, well, you could determine the element on the page that you want the position to be triggered at. Like, the top of a certain paragraph, and use that position in your condition.
var condition = $(element).offset().top;
if($(window).scrollTop > condition) { //add a fixedClassName } else { remove the fixedClassName }
and have header.fixedClassName have those proprieties ( with position fix, top 0 and width: 100% to your header etc). Be sure to add and remove a class on the body that gives it padding-top with the height of your displaced header.
Used some similar effect here http://goodmen.se/ after a point the logo shows up in the header, then there's a background change. You do something similar with your position.
EDIT 2
Here's an example fiddle http://jsfiddle.net/Corsico/vpskd8hd/
So you want a sticky header?
In your javascript create a code:
var $header_container = $('#header_container');
var header_height = $header_container.outerHeight(true);
if($(window).scrollTop() < header_height){
$header_container.removeClass('sticky');
} else{
$header_container.addClass('sticky');
}
$(window).on('scroll', function(){
if($(window).scrollTop()< header_height){
$header_container.removeClass('sticky');
} else{
$header_container.addClass('sticky');
}
});
This will add a sticky class to your header, and then you can set the header to be fixed:
.sticky{
position:fixed;
top:0;
left:0;
width:100%;
display:block;
}
This should do it. When you scroll pass the height of the header, you'll get the 'sticky' class, if not, you'll remove the sticky class...
I'm currently making a website with a "Support is Live" div which will be following the user when scrolling. So I gave it Position: Fixed; and all works fine.
But when the user scrolls back up, I want the Support div to stop so it doesn't "touch" the header.
Here is a picture that hopefully makes it easier to understand:
http://gyazo.com/2694b03181a39c3b6673901b42b5952d
I want the yellow div to stop in line with the orange field on the picture. But when the user starts to scrolling down again, it will follow.
My Best Regards
Philip
This will need some JQuery to work properly:
JSFIDDLE
JQuery
$(document).on("scroll", function() {
if($(document).scrollTop() < 100) {
$('#alert').addClass("absolute");
} else if($(document).scrollTop() > 100) { //100 is the height of your header. Adjust if needed
$('#alert').removeClass("absolute");
}
});
CSS
.absolute {
top: 100px; //same as the value in the conditions
position: absolute;
}
#alert{
background-color: #FF0;
float: left;
height: 400px;
width: 230px;
margin-left: 20px;
position: fixed;
z-index:999;
}
HTML
<div id="alert" class="absolute"> </div>
/!-- add the class so that it doesn't mess up the layout when you load the page --!/
The srolltop function checks how much space is between your viewport and the top of your document. When it reaches the height of the header, a class absolute is applied in order to keep the #alert div in its place.