I have a main nav bar which I am turning into a full width sticky on scroll. Now I am trying to incorporate a fade in/out for the full width white banner which appears on scroll (behind the nav).
Getting an undefined error when scrolling, and the fadeIn/Out is not working.
Here is my code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- STICKY HEADER -->
<script>
window.onscroll = function() {fadeFunction()};
var header = document.getElementById("head");
var sticky = header.offsetTop;
function fadeFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky").fadeIn();
} else {
header.classList.remove("sticky").fadeOut();
}
}
</script>
<style>
#head {
z-index: 10;
margin-right: auto;
margin-left: auto;
padding-left: 20%;
padding-right: 20%;
width: 100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
background-color: #fff;
}
.sticky + .content {
padding-top: 102px;
}
</style>
Console error:
Cannot read property 'fadeIn' of undefined.
I suspect my jQuery is probably not correct?
UPDATED CODE - Except that it only runs after page load, but not every time page is scrolled:
$(document).ready(function() {
var header = document.getElementById("head");
var sticky = header.offsetTop;
function addSticky() {
header.classList.add("sticky");
$('.sticky').addClass('fadeInDown');
$('.sticky').removeClass('fadeInUp');
$('.sticky').addClass('animated');
$('.subnav-sticky').addClass('fadeInDown');
$('.subnav-sticky').removeClass('fadeOutUp');
$('.subnav-sticky').addClass('animated');
}
function removeSticky() {
header.classList.remove("sticky");
$('.subnav-sticky').addClass('fadeOutUp');
$('.subnav-sticky').removeClass('fadeInUp');
}
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > sticky) {
addSticky();
}
else {
removeSticky();
}
});
});
You are mixing javascript methods with jQuery ones, fadeIn/fadeOut are jQuery functions but you're not triggering those methods on a jQuery object.
In your case header should be wrapped with the dollar function:
var $header = $('#head')
And then you can use it like this:
$header.addClass('sticky').fadeIn()
I'll say that you may not even need jQuery and you could do these animations using the same sticky class.
Thank you to those who helped. I updated my script and created a new css class. Thew new css class is to handle the transition for the sticky nav.
Here is my solution.
$(window).scroll(function(){
var header = document.getElementById("head");
var sticky = header.offsetTop;
var scrollTop = $(window).scrollTop();
if (scrollTop > 0) {
header.classList.add("sticky");
header.classList.add("transitions");
$('.subnav-sticky').addClass('fadeInDown');
$('.subnav-sticky').removeClass('fadeOutUp');
$('.subnav-sticky').addClass('animated');
}
else {
header.classList.add("transitions");
header.classList.remove("sticky");
$('.subnav-sticky').addClass('fadeOutUp');
$('.subnav-sticky').removeClass('fadeInUp');
$('.subnav-sticky').addClass('animated');
}
});
And the new css class
.transitions {
transition: all 0.9s
}
Related
I'm attempting to make a form sticky sidebar on my Squarespace website. This is the JQuery I'm using to achieve the sticky sidebar. I'm trying to create a fade in effect when the form attaches to the scrolling and fade out effect right before the form touches the footer (and vice versa for scrolling up).
Here is my JQuery script:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery("document").ready(function($){
var nav = $('form');
var footerTop = $('footer').offset().top;
var navHeight = $('#form').outerHeight();
var stopPoint = footerTop - navHeight - 70;
$(window).scroll(function () {
if ($(this).scrollTop() >= 450) {
nav.addClass("form-fixed");
} else {
nav.removeClass("form-fixed");
}
if ($(this).scrollTop() >= 2740) {
nav.addClass("form-stop");
} else {
nav.removeClass("form-stop");
}
});
});
</script>
Here is my CSS:
/*Home V2*/
.form
{posiiton: relative;}
.form-fixed
{position: fixed;
background-color: #F5FFFB;
top: 80px;
right: 7%;
z-index: 9999;
width: 20%;}
.form-stop
{position: absolute;
bottom: 0;
top: auto;
left: 0;}
I've been trying to attach .fadeIn() or .fadeOut() at the ends of the add/remove class commands. It works, but it's either only complicit during one command or fading in and out repeatedly. Any help?
I can't use bootstrap for this i can use jquery
I have basic page with a container which has a button and some paragraph
I want to move this at the bottom on the page when the user scrolls
Also this should only happen in a mobile view.
example: https://creditcards.chase.com/a1/marriottpremier/8TK?CELL=679Z&nck=120931994&ck=1213078&lk=1000160171
They used bootstrap
<div>
<h2>Near<h2>
<div>
<button>Learn more<button>
<p>conditions<p>
<div>
I have used jquery and media queries for this to work.
CSS
#media only screen and (max-width: 380px) {
.fixed {
bottom: 0;
position: fixed;
left: 0;
width: 100%;
max-width: 374px;
margin: 0 auto;
background-color: blue;
height: 70px;
}
}
JQuery
<script>
jQuery(document).ready(function() {
// define variables
var navOffset, scrollPos = 0;
// add utility wrapper elements for positioning
jQuery("nav").wrap('<div class="button1"></div>');
jQuery("nav").wrapInner('<div class="inner"></div>');
jQuery(".nav-inner").wrapInner('<div class="inner-most"></div>');
// function to run on page load and window resize
function stickyUtility() {
// only update navOffset if it is not currently using fixed position
if (!jQuery("nav").hasClass("fixed")) {
navOffset = jQuery("nav").offset().top;
}
// apply matching height to nav wrapper div to avoid awkward content jumps
jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());
} // end stickyUtility function
// run on page load
stickyUtility();
// run on window resize
jQuery(window).resize(function() {
stickyUtility();
});
// run on scroll event
jQuery(window).scroll(function() {
scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset) {
jQuery("nav").addClass("fixed");
} else {
jQuery("nav").removeClass("fixed");
}
});
});
</script>
How do I make #headnav stick to the top when the page's scroll position reaches the top, then unstick when it would be returned to its original position?
P.S. The repeated "CONTENT" in the code is to simulate scrolling. It is not a spam
jsFiddle
<h1>I AM A HEADER</h1>
<div id="headnav"></div>
<pre><h1>
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
</h1></pre>
body {
margin:0
}
#headnav {
height: 75px;
width: 100%;
background-color: black;
}
This is a very simple thing to do.
Find out what the original position of the header is, then attach a scroll handler to the body which checks the scroll position against the original position of the div.
If the scroll position is greater than the original position, add position: fixed
If the scroll position is less than the original position, remove position: fixed
(Demo)
var headnav = document.getElementById('headnav');
var headnavPos = headnav.offsetTop;
window.onscroll = function() {
if(document.body.scrollTop > headnavPos) {
if(headnav.style.position !== 'fixed') {
headnav.style.position = 'fixed';
}
} else {
if(headnav.style.position === 'fixed') {
headnav.style.position = '';
}
}
}
Just give position: fixed to h1:
h1 {position: fixed; top: 0;}
Fiddle: http://jsfiddle.net/5z4paLgr/1/
i am not sure that understand u correctly but may be this help you
Fiddle http://jsfiddle.net/jg4kdfqs/1/
JavaScript
$(document).ready(function(){
var HeaderTop = $('#header').offset().top;
var hh =HeaderTop + 300;
$(window).scroll(function(){
if( $(window).scrollTop() > HeaderTop ) {
if($(window).scrollTop() > hh) {
$('#header').css({position: 'fixed', top: '0px', background:'#000'});
} else{
$('#header').css({position: 'fixed', top: '0px'});
}
} else {
$('#header').css({position: 'static',background:'red'});
}
});
});
HTML
<div id="header">
nav
</div>
Similar to tarasikgoga but purely javascript:
Fiddle http://jsfiddle.net/5z4paLgr/3/
Javascript
var attached = false;
window.onscroll = function (e) {
if(!attached && window.scrollY > 150){
attached = true;
document.getElementById("headnav").classList.add('fixed-top');
document.getElementById("content").classList.add('content-margin-top');
}
if(attached && window.scrollY < 150){
attached = false;
document.getElementById("headnav").classList.remove('fixed-top');
document.getElementById("content").classList.remove('content-margin-top');
}
}
CSS
body {
margin:0
}
h1{
height: 150px;
margin: 0;
}
#headnav {
height: 75px;
width: 100%;
background-color: black;
}
#headnav.fixed-top{
position: fixed;
top: 0;
}
.content-margin-top{
margin-top: 75px;
}
HTML
Just add id="content" to your content div
Adjust with yours heights (here you have 150px for header and 75px for menu)
I am using following code to make a menu sticky when the window is scrolled down. It works fine if the window height is enough to scroll down the full header area, but it it creates problem is the height is just close enough to scroll, in that case it starts flashing and does not let scroll.
Here is the demo of the problem, refresh couple of times and try to scroll down. I have set the body height to 622px to reproduce the problem:
http://jsbin.com/ipEROYO/1
Here's the code I'm trying:
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
CSS:
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
It's because when you are setting the navigation div to position:fixed you are shortening the length of the document (by the height of that div), which then causes the scroll bar to go away, which causes the scrollTop() value to be 0 which causes the .nav div to be position:static and it is an endless cycle if you keep scrolling down.
Here's my quick solution:
$(document).ready(function() {
var height = $('.nav').outerHeight();
$(window).scroll(function() {
if($(this).scrollTop() > height)
{
$('.nav').css('position','fixed');
$('body').css('padding-bottom',height+'px');
}
else if($(this).scrollTop() <= height)
{
$('.nav').css('position','static');
$('body').css('padding-bottom','0');
}
});
$(window).scroll();
});
Just modified the JSbin. Check it out. You were really close, just doing more than you needed to like setting the sticky class on load of the page rather than when the function first runs. Let me know if this helps.
try that
$(window).scroll(function () {
var scroll_top = $(this).scrollTop();
if (scroll_top > 66) {//height of header
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
});
Strongly recommend a CSS only solution for this layout. No one seems to know what to call this method, so I've been referring to it as the absolute stretch technique, but in my experience it works beautifully across mobile devices and PC's including all major browsers except IE6 and below. There is some discussion of it here.
body, .header, .nav, .mainContent{
position: absolute;
top: 0;
left: 0;
right: 0;
}
body, .mainContent {
bottom: 0;
}
.header{
height: 120px;
}
.nav{
height: 70px;
top: 120px;
}
.mainContent{
top: 190px;
overflow: auto;
}
You'll find you can get very robust, concise, well organized layouts in this manner, and fixed headers, footers and sidebars follow very easily.
I have a specific problem on making a sticky header with jQuery. I tried the commonly used snippets around the web, but I perceived the same buggy thing everywhere.
At a specific document height (scrollable until a little more than calling of sticky-effect) the sticky header jumps between position: fixed and position: static.
HTML:
<header>
<div id="not-sticky"></div>
<div id="sticky"></div>
</header>
<div id="content"> ...
jQuery:
var $sticky = $("#sticky");
var offset = $sticky.offset();
var stickyTop = offset.top;
var windowTop = $(window).scrollTop();
$(window).scroll(function() {
windowTop = $(window).scrollTop();
if (windowTop > stickyTop) {
$sticky.css({
position: 'fixed',
top: 0
});
}
else {
$sticky.css({
position: '',
top: ''
});
}
});
CSS:
header {
width: 100%;
}
#not-sticky {
padding: 50px 0;
width: 100%;
}
#sticky {
padding: 24px 0;
position: relative;
width: 100%;
z-index: 25;
}
I also tried a margin-bottom on #not-sticky with the same height as the #sticky to keep a constant document-height, but the same jumpy-sticky-effect occurred.
Any idea to fix that thing?
Scroll fires too many times and trying to set an element style will always & inevitably create jumps (even barely noticeable but still jaggy).
The best way I've found is to
clone our element,
make that clone fixed
play with clone's visibility style.
Pure JS:
;(function(){ /* STICKY */
var sticky = document.getElementById("sticky"),
sticky2 = sticky.cloneNode(true);
sticky2.style.position = "fixed";
document.body.appendChild(sticky2);
function stickIt(){
sticky2.style.visibility = sticky.getBoundingClientRect().top<0 ? "visible" : "hidden";
}
stickIt();
window.addEventListener("scroll", stickIt, false );
}());
#sticky{
height:100px;
background:#ada;
height:50px;
position:relative;
/* needed for clone: */
top:0;
width:100%;
}
/* Just for this demo: */
*{margin:0;padding:0;}
#content{height:2000px; border:3px dashed #444;}
h1{padding:40px; background:#888;}
<h1>Logo</h1>
<div id="sticky">Sticky header</div>
<div id="content">Lorem ipsum...<br>bla bla</div>
So when you see the "header" fix, that's actually our fixed clone getting visible on-top.