Develop Reference

Resizing rectangle transition on scroll gets cut off

I'm trying to resize a rectangle on scroll, when the user scrolls down, the rectangle shrinks and when they scroll up the rectangle goes back to its original size. However, I've encountered a problem where if the user scrolls too fast, the rectangle doesn't have enough time to adjust its height before the user reaches the top/bottom of the page (thus not allowing the onScroll function to change the rectangle's height). No transition time is added for the resizing of the rectangle.
I'm assuming this is because the height of the rectangle is taken from the height of the div containing some text. The text also resizes on the scroll and there's a transition time of 0.4 seconds, which may be delaying the rectangle.
Is there a way to continue to allow the rectangle to resize itself, even after the user stops scrolling? Help would be greatly appreciated!
Here's the skeleton of my code:
window.onscroll = function() {scrollFunction()};
var width = window.innerWidth;
// shrink and grow are functions that change the font size of text
function scrollFunction() {
document.getElementById("rect").style.height = document.getElementById("menu").offsetHeight + (width / 100) + "px";
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("title").style.fontSize = shrink("title");
document.getElementById("here").style.fontSize = shrink("here");
} else {
document.getElementById("title").style.fontSize = grow("title");
document.getElementById("here").style.fontSize = grow("here");
}
}
#rect {
width: 100%;
position: relative;
height: clamp(40px, 10vw, 130px);
background: white;
}
#background {
height: 200vh;
}
#title {
transition: 0.4s;
}
<div id="background">
<div id="rect" style="border: 2px solid green">
<div id="menu">
<div id="title">title</div>
<div id="here">here</div>
</div>
</div>
</div>

use transform: scale(/* Your shrink size goes here, say 0.3 */) for your rectangle.

Position footer always on viewport bottom

I have a footer that contain the user name. I want to show it always on the bottom of the viewport. Like a fixed bottom bar but only on my sidebar.
I use the function
function setFooterStyle() {
var docHeight = $(window).height();
var footerHeight = $('#footer').outerHeight();
var footerTop = $('#footer').position().top + footerHeight;
$('#footer').css('margin-top', (docHeight - footerTop) + 'px');
$('#footer').removeClass('invisible');
}
this inside:
$( function () {
setFooterStyle();
window.onresize = setFooterStyle;
}
But because I use a sidebar I thing the margin-top will place the footer the amount of pixel under the sidebar and not under the page top. So it is somewhere at the bottom of the document and I have to scroll to see.
Any idea what I do wrong to keep the text always on the bottom of the viewport, while resize ans while scroll?

The general term for what you are trying to do is "Sticky Footer". The trick is to make a wrapper div for your content above the footer that takes up 100% of the height of the viewport, then to use negative margins on the footer to move it up the same amount as the height of the footer. Then the footer is always at the bottom of the viewport. Then you need to add padding to the bottom of the content so that it never gets covered by the footer, now that the footer is not taking up space in the regular flow of the layout.
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}
https://css-tricks.com/couple-takes-sticky-footer/

Scroll to div with a sticky navigation bar

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();

How to maintain a dynamic scroll in bottom only if the user moves it to bottom?

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.

Shrink a fixed Div after user has scrolled 175px with animation

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 */
}