Resize Header On Scrolling - javascript

I'm trying to change the header size (which I named #headwrapper) and its background color when scrolling down. As you can see I need it to trigger the class .small when scrolling is > 145.
It is working only when I minimize the screen's width to 600px or less.
I have this problem since I had to change the very last line from height: '130px' to height: 'auto'; max-height: '1000px'. This in order to fully see the drop down menu triggered when the screens width is 600px. It was cutting in half with height 130px.
This is the script:
$(window).scroll(function () {
var sc = $(window).scrollTop()
if (sc > 145) {
$("#pageheader, #headwrapper, #main-nav, .logos, #social, #main- logo").addClass("small");
}
else {
$("#pageheader, #headwrapper, #main-nav, .logos, #social, #main- logo").removeClass("small")
}
});
$(function(){
$('#headwrapper').data('size', 'big');
});
$(window).scroll(function(){
if ($(document).scrollTop() > 200) {
if ($('#headwrapper').data('size') == 'big') {
$('#headwrapper').data('size', 'small');
$('#headwrapper').stop().animate({
height:'75px'
}, 400);
}
} else {
if ($('#headwrapper').data('size') == 'small') {
$('#headwrapper').data('size', 'big');
$('#headwrapper').stop().animate({
height: 'auto';
max-height: '1000px'
}, 400);
}
}
});

You have an error in the animate object syntax. Replace the ; with , and quote them:
$('#headwrapper').stop().animate({
"height": 'auto', // Change ; to , as this is an object.
"max-height": '1000px'
}, 400);
And move everything inside the document's ready function:
$(function() {
$('#headwrapper').data('size','big');
$(window).scroll(function () {
var sc = $(window).scrollTop();
if (sc > 145) {
$("#pageheader,#headwrapper,#main-nav,.logos,#social,#main- logo").addClass("small");
}
else {
$("#pageheader,#headwrapper,#main-nav,.logos,#social,#main- logo").removeClass("small");
}
});
$(window).scroll(function() {
if($(document).scrollTop() > 200) {
if($('#headwrapper').data('size') == 'big') {
$('#headwrapper').data('size','small');
$('#headwrapper').stop().animate({
height:'75px'
},400);
}
}
else
{
if($('#headwrapper').data('size') == 'small') {
$('#headwrapper').data('size','big');
$('#headwrapper').stop().animate({
"height": 'auto',
"max-height": '1000px'
},400);
}
}
});
});

Related

Smooth mouse scroll upward using Jquery and CSS

I am try to make a smooth scroll upward and downward but having issue with the follow up image. t
$(window).scroll(function(event) {
var scroll = $(window).scrollTop();
if (scroll < 400) {
$('#two').css('position', 'fixed');
$('#three').css('position', 'fixed');
}
if (scroll > 400 && scroll < 900) {
$('#two').css('position', 'absolute');
$('#three').css('position', 'fixed');
}
});
https://jsfiddle.net/KingJef/6q47vmhn/32/
I have found a question with a similar dynamics, following the proposal of the author of the question it is possible to do the same in your question:
$(document).ready(function() {
$(window).scrollTop(1);
var img1 = $('#one');
var posimg1 = img1.position().top;
var img2 = $('#two');
var posimg2 = img2.position().top;
var img3 = $('#three');
var posimg3 = img3.position().top;
$(window).scroll(function(event) {
var scroll = $(window).scrollTop();
if (scroll <= posimg1) {
img1.addClass('latched');
} else {
img1.removeClass('latched');
}
if (scroll <= posimg2) {
img2.addClass('latched');
} else {
img2.removeClass('latched');
}
if (scroll <= posimg3) {
img3.addClass('latched');
}
});
});
Demo: https://jsfiddle.net/pr0mming/ybar8onj/14/
Apparently the error is to preserve the absolute images with css, instead of this they are left in fixed and the property would be eliminated once the scroll is exceeded (visibility level) but otherwise the images should be kept in fixed.
But there is a shorter solution with the same algorithm, of course, it is simply to add this magic css and remove it as the case may be:
$(document).ready(function() {
$(window).scroll(function(event) {
var scroll = $(window).scrollTop();
if (scroll < 500) {
$('#two').css('position', 'fixed');
$('#three').css('position', 'fixed');
}
if (scroll > 500 && scroll < 1600) {
$('#two').removeAttr( 'style' );
$('#three').css({ position: 'fixed', top: 0, width: 'auto' });
}
else {
$('#two').css({ position: 'fixed', top: 0, width: 'auto' });
$('#three').css({ position: 'fixed', top: 0, width: 'auto' });
}
});
});

How to use jquery css('display', 'block') and css('display', 'none') in if else statement

I am trying to use jquery-circle-progress (https://github.com/kottenator/jquery-circle-progress) start animate when user scroll in to that location. I was able to do a little bit with bug. Problem is the animation keep repeating. I like to animate it only once when user scroll to that location. Here is my work:
jquery:
$(window).scroll(function() {
var windowWidth = $(this).width();
var windowHeight = $(this).height();
var windowScrollTop = $(this).scrollTop();
$(document).ready(function() {
$('#circle').circleProgress({
value: 0.75,
size: 180,
fill: {
gradient: ["lightblue", "grey"]
}
});
});
if (windowScrollTop > 760) {
$('#circle').css('display', 'block');
} else {
$('#circle').css('display', 'none');
}
});
html:
<div id="circle"></div>
CSS:
#circle {
text-align: center;
}
try
$(window).scroll(function() {
var windowWidth = $(this).width();
var windowHeight = $(this).height();
var windowScrollTop = $(this).scrollTop();
if (windowScrollTop > 760 && $('#circle').is(':hidden')) {
$('#circle').show('normal', function() {
$(this).circleProgress({
value: 0.75,
size: 180,
fill: {
gradient: ["lightblue", "grey"]
}
});
});
}
if (windowScrollTop < 760 && $('#circle').is(':visible')) {
$('#circle').hide();
}
});

Scroll to bottom of div when close to bottom

I am working on a chatting service and i need the site to scroll to the bottom of the chatt, and if a person whants to scroll up, the script for scrolling down will stop.
I have the chat inside a div with the id #chat_innhold, and here is my attemnt.
window.setInterval(function scrolled(o)
{
if(o.offsetHeight + o.scrollTop > o.scrollHeight - 75)
{
window.setInterval=function()
{
return false;
}
}
else
{
window.setInterval=function()
{
$("html, #chat_innhold").animate({ scrollTop: $('#chat_innhold').prop("scrollHeight")}, 'slow');
}
}
}, 1000);
When i am 75 pixels above bottom, a want to stop the scroll to bottom function.
Why are you overriding window.setInterval?
If I understood correctly, you need something like that
<div class="wrapper">
<button>Go to bottom</button>
<button class="go-top">Go to top</button>
</div>
body,
.wrapper {
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
height: 1000px;
}
.go-top {
bottom: 0;
position: absolute;
left: 0;
}
var elem = $('.wrapper')[0];
if (elem.addEventListener) {
if ('onWheel' in document) {
// IE9+, FF17+, Ch31+
elem.addEventListener("wheel", onWheel);
} else if ('onmousewheel' in document) {
// old variant
elem.addEventListener("mousewheel", onWheel);
} else {
// Firefox < 17
elem.addEventListener("MozMousePixelScroll", onWheel);
}
} else { // IE8-
elem.attachEvent("onmousewheel", onWheel);
}
function onWheel(e) {
e = e || window.event;
var delta = e.deltaY || e.detail || e.wheelDelta;
if(delta < 0 || delta > 0) {
$('html, body').stop();
}
}
var deltaWindowBodyHeight = $('body').height() - $(window).height();
function goToBottom() {
$('html, body').animate({
scrollTop: deltaWindowBodyHeight - 75
}, 1000);
}
function goToTop() {
$('html, body').animate({
scrollTop: 0
}, 1000);
}
$('button').click(function() {
if($(this).hasClass('go-top')) {
goToTop();
} else {
goToBottom();
}
});
JSFiddle example

jquery scrolling function not working properly

I'm using this code to change position when scroll. The problem is when scrolled to top of the page css top:'0px' not working.
Here is the code.
window.onload = function() {
var stickySidebar = $('.bk-form-wrap').offset().top;
var $div = $('div.bk-form-wrap');
$(window).scroll(function() {
if ($(window).scrollTop() > stickySidebar) {
$div.css({
position:'fixed',
height: '70px'
});
$div.animate({
top: '95px',
//top:'100%',
// marginTop: - $div.height()
});
}
else {
}
if ($(this).scrollTop() == 0) {
//Call your event here
$div.css({
position:'relative',
});
$div.animate({
top:'0px',
});
}
});
};
And link to page. Plese help. Thanks.
Try this.
var $div = $('div.bk-form-wrap');
$(window).scroll(function() {
var stickySidebar = $('.bk-form-wrap').offset().top;
if ($(window).scrollTop() > stickySidebar) {
$div.css({
position:'fixed',
height: '70px'
},1000);
$div.animate({
top: '95px'
//top:'100%',
// marginTop: - $div.height()
});
}
else if ($(window).scrollTop() == 0) {
//Call your event here
$div.css({
position:'relative'
});
$div.animate({
top: '0px'
},500);
}
});

Animate easing for scrollTop

How to animate easing for scrollTop? I'm using scrollTop to move div element when site is scrolled. I want div element to move smoothly not jumping so sharply.
Here is the code:
jQuery(window).scroll(function() {
if (jQuery(window).scrollTop() > 20 ) {
jQuery('.topBar').css({
'position':'fixed',
'top':-40,
'bottom':""
});
}
else {
jQuery('.topBar').css({
'position':'fixed',
'top':0,
'bottom':""
});
}
});
did you try animating the topBar tag then?
jQuery(window).scroll(function () {
if (jQuery(window).scrollTop() > 20) {
jQuery('.topBar').animate({
top: "40"
}, 300, function () {
jQuery(this).addClass('scrolled');
});
} else {
jQuery('.topBar').animate({
top: "0"
}, 300, function () {
jQuery(this).removeClass('scrolled');
});
}
});
I've created following fiddle to illustrate what i mean:
http://jsfiddle.net/2d3mxm5a/

Categories