I have a div that is fixed at the top of the page, which holds the navigation to the website. It has a height of 175px. This DIV will remain on show as you scroll down the page.
I would like this div to shrink to a height of 90px when the user has scrolled down the page 175px and remain at 90px as they scroll down the page. When they scroll back up to the top, I'd like the DIV to grow back to its original 175px height.
I'd like this to animate when doing so (preferably slide up and slide down) and would prefer to use CSS3 to do so...
Here is a fiddle of what I have so far but because I'm a query noob, not sure how to go about things… http://jsfiddle.net/bnsUB/
EDIT:
I forgot to mention that I also have content within this DIV that will need its paddings etc. adjusted whilst the container slides up/down. So if those padding values could shrink/grow as well then that would be an added bonus
You need to trigger an action based on the current $.scrollTop() value of the window.
Something like:
$(document).scroll(function(){
if ($(this).scrollTop()>175){
// animate fixed div to small size:
$('.wrapper').stop().animate({ height: 90 },100);
} else {
// animate fixed div to original size
$('.wrapper').stop().animate({ height: 175 },100);
}
});
Here goes:
http://jsfiddle.net/bnsUB/4/
If you want to animate any other thing (such as paddings and margins), just add them as values to the object you pass to the .animate() function. ( for example - { height: 175, 'padding-top': 20, 'margin-top': 10 } etc. )
$(window).scroll(function()
{
if ($(window).scrollTop() == $(document).height() - $(window).height())
{
$('#tt').animate({height:'90px'}, 500);
}
});
Here is a solution in vanilla JS and CSS animation:
JS:
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 175 || document.documentElement.scrollTop > 175) {
document.getElementById("header").classList.add("narrow");
} else {
document.getElementById("header").classList.remove("narrow");
}
}
CSS:
#header{
transition: 0.2s;
height: 175px;
}
#header.narrow{
height: 90px !important;
}
#header .anyelementclass{
transition: 0.2s;
}
#header.narrow .anyelementclass{
/* any style here */
}
Related
I have a div of dynamic content so it height depends on dynamic data. when i scroll the browser window to bottom, if the that div reaches its end (bottom) on the view, i want to trigger a function (for now just console it ('reached bottom of div')). Also if browser reached the end of the page, the same function wants to trigger. how to achieve this im new to JS and innerHeight, clientHeight so on.. are confusing.
body {
min-height: 500px;
background-color: yellow;
}
.dynamicDiv {
min-height: 200px;
background-color: red;
color: #fff;
}
<div class="dynamicDiv">
some Dynamic data
</div>
window.innerHeight property returns the height of a window's content area.
window.scrollY returns the number of pixels that the document is currently scrolled vertically.
document.body.offsetHeight returns body's height including padding and border
https://jsfiddle.net/smilingpigs/n1vcx3po/4/
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
alert("you are at the bottom of the page");
}
};
The page has a sticky navbar that stay on screen all the time.
When I am scrolling to the next section(div) of the page, it will scroll so the div starts at the top of the screen , so the navigation bar cover it a little bit.
How to minus from y scrolling position the navigation bar height ?
$('html, body').animate({
scrollTop: $("#section2").offset().top // minus the nav height
}, 1000);
Also - how to make this navbar height available to my javascript (from the css) using a good practice ? (global var?)
You can select your navigation bar (here I gave my navigation bar the id nav) and get its height by doing:
$("#nav").height();
You can then subtract this from the scrollTop property.
However, do note, if your nav bar has padding and/or a margin, to correctly calculate the height you will need to use a different method from .height. See this answer if you're having difficulties.
See working example below:
$('html, body').animate({
scrollTop: $("#section2").offset().top - $("#nav").height() // minus the nav height
}, 1000);
body {
margin: 0;
}
nav {
background: black;
height: 10vh;
width: 100%;
position: fixed;
}
section {
height: 100vh;
}
#section1 {
background: red;
}
#section2 {
background: lime;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav"></nav>
<section id="section1">Top</section>
<section id="section2">Top</section>
To know the height of any element :
Go to the Inspector (Ctrl+Shift+i), select the 'nav' element and on the right side, click the box-model. This will give you the height and width of the selected element.
In JavaScript, to get the height :
$("nav").height();
I have a scrollview which has content that is being refreshed (increasing it's size) by a ajax query.
I want that (like commonly in all the ides) when the user has the scroll on the bottom, the scroll must be mantained in the bottom even when adding more text.
I tryed to find when the scroll is in the bottom with this code:
var scrollDiv = $('#modalText');
var height = scrollDiv[0].scrollHeight;
if (scrollDiv[0].scrollTop==height){
//scroll is in the bottom, must force the scroll to bottom
}else{
//scroll is not in the bottom, must maintain the scroll point
}
The problem is that scrollDiv[0].scrollTop is not equal to scrollDiv[0].scrollHeight when the user has the scroll in the bottom I can't understand why, but it's about 900 pixels less!
Does anyone has any solution for this?
you need to add the height to scrollTop to get scrollBottom
var scrollDiv = $('#modalText');
function add() {
var height = scrollDiv[0].scrollHeight;
var scroll = scrollDiv[0].scrollTop + scrollDiv[0].offsetHeight;
scrollDiv.append('<p>' + Number(new Date()) + '</p>');
if (scroll == height) {
//scroll is in the bottom, must force the scroll to bottom
scrollDiv.scrollTop(height);
} else {
//scroll is not in the bottom, must maintain the scroll point
}
};
#modalText {
max-height: 180px;
overflow: auto;
width: 200px;
background-color: #f5f5f5;
padding: 10px;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="add()">Add</button>
<div id="modalText"></div>
The difference of 900 you are facing is because because of the viewport/client height. If you add that to the calculations you'll see that find that scrollHeight == scrollTop + clientHeight. You may review this at Mozilla Foundation's documentation of scrollHeight.
I'd like to ask if there is a way to use jQuery animate() method to animate horizontal navbar's top property on window scroll.
Here is code I use:
window.addEventListener("scroll", function() {
if (window.scrollY > 200) {
$('#navbar').css({top:"100px"});
}
else {
$('#navbar').css({top:"0px"});
}
},false);
CSS:
#navbar{
top:0;
position:fixed;
transition: top 0.5s;
}
When you scroll down 200px the navbar changes its top position from 0 to 100px;
This works fine, but if I change methods and put .animate instead of .css,
$('#navbar').animate({top:"100px"});
it stops working. Any ideas why?
You can do this with css transition and how you can achieve this is with jQuery addClass instead of css()
DEMO
$(window).on('scroll', function () {
if ($(this).scrollTop() > 200) {
if (!$('.navbar').hasClass('expand')) {
$('.navbar').addClass('expand');
}
} else {
if ($('.navbar').hasClass('expand')) {
$('.navbar').removeClass('expand');
}
}
});
.navbar {
top: 0;
position: fixed;
transition: top 0.5s;
}
.navbar.expand {
top: 100px;
}
Scroll event listener execute every time when you scroll page on every pixel, and animate starts from begin. This gives unexpected results.
http://jsfiddle.net/29tkxawy/
You should be leave as is (with .css()).
Or like this without css transition:
http://jsfiddle.net/29tkxawy/10/
I have a navigation bar on a website that is currently working fine using this jQuery code to make it "sticky" when scrolled past:
offset = $('#navWrapper').offset();
$(window).scroll(function(){
if( $(window).scrollTop() >= offset.top ) {
$('#navWrapper').addClass('fixedNavWrapper');
$('#topHeader').addClass('fixedNavPadding');
} else {
$('#navWrapper').removeClass('fixedNavWrapper');
$('#topHeader').removeClass('fixedNavPadding');
}
});
to apply and remove this CSS:
.fixedNavWrapper {
position:fixed;
top:0;
left:0;
z-index:999;
}
.fixedNavPadding {
padding-bottom:45px;
}
When I apply "height: 100%" to html, it stops working. I need html to have height: 100% to use a sticky footer with it.. what can I do?
When you set the html height to 100%, you are no longer scrolling into the window, but inside the html. Therefor, this code won't work :
$(window).scroll();
$(window).scrollTop();
Try changing window to $('html,body').