css
.head {
width: 100%;
left: 0px;
top: 0px;
height: 76px;
border-bottom: 1px solid #e6e6e6;
position: fixed;
display: flex;
background: #fff;
z-index: 10;
}
Javascript
$(window).scroll(function () {
const height = $(document).scrollTop();
console.log(height);
if (height > 0) {
console.log("no 0");
$("#tt-body-index .head").animate(
{
marginTop: 0,
},
1000,
"swing"
);
} else if (height === 0) {
console.log("0");
$("#tt-body-index .head").animate(
{
marginTop: -76,
},
1000,
"swing"
);
}
});
I'm writing a script using jQuery.
When scrolling starts .head appears and tries to make scrollTop 0 disappear.
.head appearing is good, but when scrollTop is zero, it doesn't become marginTop: -76.
Use CSS transitions and animation whenever possible which is more smooth compared to jquery animations, this can be done using css transition check the below code. Also, one thing you need to trigger scroll on page load in case if the browser scrolls the page to some part from the cache.
CSS
.head {
width: 100%;
left: 0px;
top: -80px;
height: 76px;
border-bottom: 1px solid #e6e6e6;
position: fixed;
display: flex;
background: #fff;
z-index: 10;
background-color: aqua;
transition: top 1s;
}
body.showHeader .head{
top: 0px;
}
Javascript
$(window).scroll(function () {
const height = $(document).scrollTop();
console.log(height);
if (height < 76) {
$('body').removeClass('showHeader')
} else {
$('body').addClass('showHeader')
}
}).scroll();
Related
I have a div which have two CTA buttons.I'm going to hide this div after reaching 90% of the page or reaching to my #footer div. The reason i'm doing this is to prevent it from interfering with footer.
I had found some codes but it will hide the div after 800px scroll not based on percentage .
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
body {
height: 1600px;
}
.bottomMenu {
display: none;
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomMenu"></div>
Any idea?
hide this div after reaching 90% of the page:
You need to get 90% with Math.round($(document).height() * 90 / 100)
var height = Math.round($(document).height() * 90 / 100);
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > height) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
body {
height: 1600px;
}
.bottomMenu {
display: none;
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomMenu"></div>
or reaching to my #footer div
You need to use offset().top for getting element offset from window:
var height = Math.round($('#footer').offset().top);
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > height) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
body {
height: 1600px;
}
.bottomMenu {
display: none;
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomMenu"></div>
<div style="height:1000px;"></div>
<div id="footer"></div>
Here I have converted it in Percentage. Update PER value to update config.
//PER is Percentage value
var PER = 90;
var yInPixel, totalHeight;
//If page if with dynamic height change totalHeight and yInPixel after Resize Event
$(document).ready(function() {
totalHeight = $(this).height();
yInPixel = totalHeight * (PER / 100) - window.innerHeight;
});
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > yInPixel) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
body {
height: 1600px;
}
.bottomMenu {
display: none;
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomMenu"></div>
I'm trying to write a function that watches the window for a few things:
If the window is greater-than 900px and the window is scrolled passed 100 add a BG color to the nav
If the nav is scrolled passed 100 and the window is resized to less-than 900px change the BG color nav.
I've written two functions that should be doing the trick. My problem is my functions work right up until you scroll passed 100 and resize the screen: they won't apply the second class with the second bg color.
Snippet below. Can anyone provide assistance?
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var nav = $('nav');
if( scroll > 100 ) {
nav.addClass('scrolled');
} else {
nav.removeClass('scrolled');
}
});
$(window).resize(function() {
var mq = window.matchMedia('(min-width: 100px) and (max-width: 900px)');
if( mq.matches && $('nav').hasClass('scrolled')) {
$('nav').removeClass('scrolled');
console.log("Working");
$('nav').addClass('scrolledTwo');
} else {
console.log("Not working");
$('nav').removeClass('scrolledTwo');
}
});
});
* {
padding: 0;
margin: 0;
}
nav {
height: 70px;
width: 100%;
border: 1px solid;
transition: all .2s ease;
background-color: transparent;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.nav-fixedWidth {
height: inherit;
width: 1000px;
margin: 0 auto;
border: 1px solid #ccc;
}
main {
width: 100%;
height: 2000px;
border: 1px solid;
background-color: #f1f1f1;
}
.scrolled {
background-color: red;
}
.scrolledTwo {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="nav-fixedWidth"></div>
</nav>
<main></main>
Your code is working fine it is even applying the second class with the second bg color if you will resize slowly your window. The only issue is this if( mq.matches && $('nav').hasClass('scrolled')) condition. As you have mentioned $('nav').hasClass('scrolled') so first time when you will resize it will be true and then
$('nav').removeClass('scrolled');
console.log("Working");
$('nav').addClass('scrolledTwo');
this will apply scrolledTwo class to nav. After that when you will further resize it will never pass this if( mq.matches && $('nav').hasClass('scrolled')) condition, until you don't resize the screen width to less than 100px or greater than 900px and scroll, and will always goto else and you will always see the red color. Try removing it
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var nav = $('nav');
if( scroll > 100 ) {
nav.addClass('scrolled');
} else {
nav.removeClass('scrolled');
}
});
$(window).resize(function() {
var mq = window.matchMedia('(min-width: 100px) and (max-width: 900px)');
if( mq.matches ) {
$('nav').removeClass('scrolled');
console.log("Working");
$('nav').addClass('scrolledTwo');
} else {
console.log("Not working");
$('nav').removeClass('scrolledTwo');
}
});
});
* {
padding: 0;
margin: 0;
}
nav {
height: 70px;
width: 100%;
border: 1px solid;
transition: all .2s ease;
background-color: transparent;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.nav-fixedWidth {
height: inherit;
width: 1000px;
margin: 0 auto;
border: 1px solid #ccc;
}
main {
width: 100%;
height: 2000px;
border: 1px solid;
background-color: #f1f1f1;
}
.scrolled {
background-color: red;
}
.scrolledTwo {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="nav-fixedWidth"></div>
</nav>
<main></main>
Another issue in your code is if I scroll and resize the screen width between 100 to 900 and then again resize it to out of this window then there is no class assigned to your div and that is due to no class added in else of resize function. Changing that to this will do that trick also :)
else {
console.log("Not working");
$('nav').removeClass('scrolledTwo');
var scroll = $(window).scrollTop();
if( scroll > 100 ) {
$('nav').addClass('scrolled');
}
}
I have a strange issue that only affects Firefox.
In my dev website, I have this jQuery code:
jQuery('body').on('click', '.sidebar-toggle', function(e){
if (sidebarStatus == "OFF") {
jQuery('.panel-sidebar').animate({
marginLeft: "0px"
}, 400);
jQuery('.products-listing-contents').animate({
marginLeft: "200px",
width: '-=200px',
'padding-right' : 0
}, 400);
setTimeout(function(){
jQuery('.products-listing-contents').css("width","calc(100% - 200px)");
}, 420);
sidebarStatus = "ON";
}
else {
jQuery('.panel-sidebar').animate({
marginLeft: "-184px"
}, 400);
jQuery('.products-listing-contents').animate({
marginLeft: "15px",
width: '100%',
'padding-right' : "15px"
}, 400);
sidebarStatus = "OFF";
}
setCookie('sidebarStatus', sidebarStatus, 9999999);
});
What it basically does is pushing a left sidebar to the left and right while adjusting the content width that appears to the left of it.
It works fine in IE11 and Chrome, but in FF the content area jumps to the bottom and back up whenever I click the slide toggle.
I have been trying to adjust the numbers, but that doesn't help. Any help would be greatly appreciated. Thank you.
I had issues with setTimeout in FF before. In your case try to avoid using setTimeout and it might just work.
You don't have to call a setTimeout to invoke something after the Animation ends. There is a built in callback for that. You can write a callback function with a comma after the timedelay. Check if that helps. Even if it doesn't help with your problem doing like given below is definitely better practice than using an async like setTimeout.
Like this:
if (sidebarStatus == "OFF") {
jQuery('.panel-sidebar').animate({
marginLeft: "0px"
}, 400);
jQuery('.products-listing-contents').animate({
marginLeft: "200px",
width: '-=200px',
'padding-right' : 0
}, 400, function(){
jQuery('.products-listing-contents').css("width","calc(100% - 200px)");
});
sidebarStatus = "ON";
}
Use css transitions. Much easier and cleaner than using jQuery.
$("#sidebar-container").on("click", function () {
$(this).toggleClass('maximized-sidebar-container');
$("#content-container").toggleClass('minimized-content-container');
});
#application-container {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
overflow: auto;
}
#sidebar-container {
position: absolute;
left: -160px;
width: 170px;
height:400px;
background-color: #0F0;
overflow: hidden;
transition: 350ms left ease-out;
z-index: 3;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
}
.maximized-sidebar-container {
left: 0px !important;
}
#content-container {
position: absolute;
right: 0px;
left: 10px;
height: 400px;
background-color: #808080;
border-width: 0px 0px 0px 1px;
border-style: solid;
border-color: #FFFFFF;
overflow-x: hidden;
overflow-y: auto;
transition: 350ms left ease-out;
z-index: 0;
}
.minimized-content-container {
left: 170px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="application-container">
<div id="sidebar-container"></div>
<div id="content-container">Content</div>
</div>
I'm trying to get a header made that gets slightly smaller on scroll. Currently, the code looks like this for the jQuery involved in the header size:
$(function() {
$('#Header').data('size','big');
});
$(window).scroll(function() {
if ($(document).scrollTop() > 0) {
if ($('#Header').data('size') == 'big') {
$('#Header').data('size', 'small');
$('#Header').stop().animate({
height: '60px'
}, 600);
}
} else {
if ($('#Header').data('size') == 'small') {
$('#Header').data('size', 'big');
$('#Header').stop().animate({
height: '100px'
}, 600);
}
}
});
It is working great, and I have the header size portion down. How can I somewhat replicate this in order to change the size of the logo from roughly 80 x 80 to 40 x 40 (and include the transition)?
Here's the CSS for the logo:
#Logo {
background: url("images/Logo.png") no-repeat;
position: absolute;
top: 8px;
width: 81px;
height: 85px;
z-index: 73;
-webkit-transition: background-image .5s;
margin-left: 100px;
}
Site URL is http://www.tremor.yt/Site/Creators.html
*edited to include your full code
Your JS:
$(function() {
$('#Header').data('size','big');
});
$(window).scroll(function() {
if ($(document).scrollTop() > 0) {
if ($('#Header').data('size') == 'big') {
$('#Header').data('size', 'small');
$('#Header').stop().animate({
height: '60px'
}, 600);
$('#Logo').stop().animate({
height: '40px',
width: '40px'
},600);
}
} else {
if ($('#Header').data('size') == 'small') {
$('#Header').data('size', 'big');
$('#Header').stop().animate({
height: '100px'
}, 600);
$('#Logo').stop().animate({
height: '85px',
width: '81px'
},600);
}
}
});
And your css:
#Logo {
background: url("images/Logo.png") no-repeat;
background-size: contain;
position: absolute;
top: 8px;
width: 81px;
height: 85px;
z-index: 73;
-webkit-transition: background-image .5s;
margin-left: 100px;
}
I'd just like to point out that while jquery does this nice and easily, some (myself included) might consider it preferable to toggle a css class (something like 'smaller') on both the #Header and #Logo and use css to do the resizing and animation. The css transition would then be:
#Header, #Logo {
transition: height 0.6s, width 0.6s;
}
I have been trying to set a div's position to fixed when a user has scrolled far enough. I noticed that when the div's position is set to fixed the width is not the same as the parent elemnt. How can I keep the width of the div with position: fixed the same as the parent element?
In this example I want the bottom div to be the same width as the yellow box once position:fixed is set.
http://jsfiddle.net/BYJPB/
Here's my HTML:
<header>
<div class="filler-space">
Filler Space
</div>
<div class="toolbar">
<div class="current-article">
<div class="progress-bar"></div>
My article
</div>
</div>
</header>
Here's my CSS:
body {
padding:0 10px;
height: 1000px;
}
.filler-space {
background-color: yellow;
border:1px solid #000000;
height: 140px;
}
.toolbar {
border: 1px solid black;
}
.current-article {
font-weight: 600;
height: 100%;
line-height: 40px;
overflow: hidden;
width: 100%;
z-index: -1;
}
.progress-bar {
position: absolute;
}
.prog .progress-bar {
background: none repeat scroll 0 0 #F2F4F7;
bottom: 0;
height: 100%;
left: 0;
margin: 0 -10px 0 -10px;
overflow: hidden;
right: 0;
top: 0;
transition: width 0.1s ease 0s;
z-index: -1;
width: 100%;
}
Here is my JavaScript:
var $toolbar = $('.toolbar');
var $window = $(window);
var $header = $('header');
$(document).scroll(function() {
var scrollTop = $window.scrollTop();
if ( scrollTop > 150) {
$toolbar.css({
'position' : 'fixed',
'top' : 0
});
$header.addClass('prog');
}
else {
$toolbar.css({
'position' : 'static',
'top' : 0
});
$header.removeClass('prog');
}
});
Update your js, I dont understand your requirements, but i think this is what you are looking for.
if ( scrollTop > 150) {
$toolbar.css({
'position' : 'fixed',
'top' : 0,
'width':$header.width()
});
$header.addClass('prog');
}
else {
$toolbar.css({
'position' : 'static',
'top' : 0
});
$header.removeClass('prog');
}