I have jQuery code that is working:
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos < 10 ) {
$("div").css('width', 75);
} else if(scroll_pos > 25 && scroll_pos < 75) {
$("div").css('width', 100);
} else if(scroll_pos > 75 && scroll_pos < 100){
$("div").css('width', 125);
}else if(scroll_pos > 100){
$("div").css('width', 150);
}
});
});
and a div element with width:75px at start.
With that code when user scroll down dive element is changing width from 75px to 150px in four steps, but I'm looking for something that will change that width from 75px to 150px smoothly without steps, any idea?
Maybe this solution is what you try to get:
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if (scroll_pos > 150) {
scroll_pos = 150;
};
$("div").animate({
width : (75+0.75*scroll_pos)+"px"
});
});
});
You probably are looking for .animate() in jQuery. Just change the size of your div on scroll using animate.
$(document).ready(function(){
$(document).scroll(function() {
$("div").animate({
width : "150px"
});
});
});
For continuous increment of width on scroll try this way. This will increment the width of div on each scroll with 30px and will increase until it reaches 150px.
$(document).ready(function(){
$(document).scroll(function() {
if($("div").width() <= "150"){
$("div").animate({
width : "+=30"
});
}
});
});
jsFiddle
References : .scroll() , .animate()
Related
I have done topbar sticky on desktop view with the help of Jquery but I don't want a sticky top bar on a mobile screen during scroll.
I did topbar sticky with this code:
$(document).ready(function(){
$(window).scroll(function(){
var sticky = $('#top-header'),
scroll = $(window).scrollTop();
if (scroll >= 100) {
sticky.addClass('fixed');
} else {
sticky.removeClass('fixed');
}
});
});
You should modify your condition statement:
if ((scroll >= 100) && ($(window).width() > /* Mobile screen width */)) {
sticky.addClass('fixed');
}
You can add media query using css or you can define screen width for your jQuery code.
if($(window).width() > 767){
$(document).ready(function(){
$(window).scroll(function(){
var sticky = $('#top-header'),
scroll = $(window).scrollTop();
if (scroll >= 100) {
sticky.addClass('fixed');
} else {
sticky.removeClass('fixed');
}
});
});
}
use this code and you also need one more condition for mobile device width. using this code you can remove the "fixed" class on resize also.
$(document).ready(function(){
$(window).on('scroll resize',function(){
var sticky = $('#top-header');
var scrollTop = $(document).scrollTop();
var windowWidth = $(window).width();
if(scrollTop >= 200 && windowWidth >= 768){
sticky.addClass('fixed');
}else {
sticky.removeClass('fixed');
}
});
});
I know there's a pretty simple way of doing this, but I can't seem to find anything in my searches.
I've found lots of examples of getting to a certain scroll location on the page and then animating a div to a different size, however I want to adjust a div's max height depending on the scroll location. Initially i'd like the div max-height to be about 150px, and then as you scroll from around 200px down the page to 400px down the page, I want the max-height of the div to decrease to 75px. Then obviously as you scroll back up, it gets larger.
I can't provide an example of what I've tried already, as I'm yet to attempt it as I have no idea on where to start.
Note: The size should gradually adjust with the scroll position.
I'm not sure if I understood your problem, but when I did I came out with this :D
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop < 200){
maxHeight = 150;
}else if(scrollTop > 400){
maxHeight = 75;
}else{
maxHeight = 150 - 75 * (((scrollTop-200) * 100)/200)/100;
}
$('#thediv').stop().animate({'max-height': maxHeight+"px"}, 500);
})
Here you have a sample : https://jsfiddle.net/keccs4na/
You could try this:
$(window).on('scroll', function() {
var scrollTop = $(window).scrollTop();
if (scrollTop >= 200 && scrollTop <= 400) {
$('#divID').stop().animate({height: "75px"}, 250);
} else {
$('#divID').stop().animate({height: "150px"}, 250);
}
});
Note: You'll want to use CSS to initially set the height to 150px.
Try this.
$(window).on('scroll', function () {
var v = $(window).scrollTop();
if (v > 200) {
$('#id-of-div').css({"height": "75px","max-height":"75px"});
}
else {
$('#id-of-div').css({"height": "150px","max-height":"150px"});
}
});
EDIT:
$(window).on('scroll', function () {
var v = $(window).scrollTop();
if (v > 200) {
$('#id-of-div').animate({"height": "75px","max-height":"75px"},500);
}
else {
$('#id-of-div').animate({"height": "150px","max-height":"150px"},500);
}
});
I have a div that I want to keep position: fixed when scrolling between two points.
For example, it should remain fixed only between the height of it's container div
I've done the following:
$window.scroll(function(e) {
pos = $('.container-element').height();
if ($window.scrollTop() > pos) {
$(scroll-element).css({
position: 'relative',
});
} else {
$(scroll-element).css({
position: 'fixed',
});
}
});
However, this doesn't stop the scroll-element from becoming relative on reaching the end of the container-element. What should I do to achieve the intended behavior?
EDIT:
JSFiddle: http://jsfiddle.net/09760d60/
I think You should remove fixed position when $(window).scrollTop() > containerHeight-childHeight
$(document).ready(function(){
$(window).scroll(function(e) {
containerHeight = $('.container-element').height();
childHeight = $(".scroll-element").height();
if ($(window).scrollTop() > containerHeight-childHeight) {
$('.scroll-element').removeClass('fixed');
} else {
$('.scroll-element').addClass('fixed');
}
});
});
Please check updated fiddle
http://jsfiddle.net/PrashantShirke/1u991v1j/
You should check the top and bottom bounds of your container, and compare it with the top and bottom bounds of your scroll element :
$(document).ready(function(){
$(window).scroll(function(e) {
containerTop = $('.container-element').offset().top;
containerBottom = $('.container-element').height()+$('.container-element').offset().top;
scrollEl = $('.scroll-element').height();
if ($(window).scrollTop() >= containerTop && $(window).scrollTop()+scrollEl <= containerBottom) {
$('.scroll-element').css({
"top":$(window).scrollTop()+"px"
});
}
});
});
Exemple
$(window).scrollTop() < containerTop: scroll element is at top of content
$(window).scrollTop()+scrollEl > containerBottom: bottom of scroll element is at bottom of content
If scroll element has to move, adjust its top property while being absolutelly positioned by CSS.
I think it would be more robust to check the bottoms of the container and window, not the heights of the container and child.
$(document).ready(function(){
var $window = $(window);
var $container = $('.container-element');
var $scroll = $('.scroll-element');
var containerBox = $container[0].getBoundingClientRect();
$window.scroll(function(e) {
var scrollBottom = $window.scrollTop() + $window.height();
var canSeeContainerBottom = scrollBottom > containerBox.bottom;
$scroll.css('position', canSeeContainerBottom ? 'relative' : 'fixed');
});
});
http://jsfiddle.net/bryandowning/09760d60/14/
I use the code given below for my back to top option
$(window).scroll(function() {
if ($(this).scrollTop()) {
$("#to-top").fadeIn();
} else {
$("#to-top").fadeOut();
}
if($(window).scrollTop() + $(window).height() < $(document).height() - $("#footer").height()) {
$('#to-top').css("position","fixed"); //resetting it
$('#to-top').css("bottom","0"); //resetting it
}
if($(window).scrollTop() + $(window).height() > $(document).height() - $("#footer").height()) {
$('#to-top').css("position","relative"); // make it related
$('#to-top').css("bottom","188px"); // 60 px, height of #toTop
}
});
$("#to-top").click(function() {
$("html, body").animate({scrollTop: 0}, 1000);
});
but it does not work while i scroll down, because my content has the position relative as well as i have a floting div which position is absolute.In above code i need to set the position of my content is absolute.If i do this the two content displace.
here is my html code:
<a id="to-top" style="position:fixed;bottom:0px;right:15px;" href="#" title="Back to Top"><img src="../images/BackToTop_icon.jpg"/></a>
how can i fixed this problem..
if you don't want to animate anything, then window.scrollTo(0,0) will do. (x coord, y coord).
If you want to animate it, then this will do:
$('body').animate({scrollTop:0},2000);
no need to create old html hash-anchors (www.domain.com/index.html#paragraph2), jQuery does the trick :)
This is now correct and it works....
$(document).ready(function() {
$("#to-top").css("display","none");
});
$(window).scroll(function() {
if ($(this).scrollTop()) {
$("#to-top").fadeIn();
} else {
$("#to-top").fadeOut();
}
if($(window).scrollTop() + $(window).height() < $(document).height() - $("#sc-main-footer").height()) {
$('#to-top').css("position","fixed"); //resetting it
$('#to-top').css("bottom","0"); //resetting it
}
if($(window).scrollTop() + $(window).height() > $(document).height() - $("#sc-main-footer").height()) {
$('#to-top').css("bottom","188px");
}
});
$("#to-top").click(function() {
$("html, body").animate({scrollTop: 0}, 1000);
});
What makes the animation delay?
All jQuery on the site is having some sort of delay..
$(function(){
$(window).scroll(function() {
var elementTop = $('body').offset().top;
var position = elementTop+ $(window).scrollTop();
if(position >= 20){
$('#top').animate({top: '40px'}, 300);
} else if(position < 20){
$('#top').animate({top: '80px'}, 300);
}
console.log(position);
});
});
Live:
Link here - It's the menu/navigation
Your code is being fired each time you scroll. The animate methods are being concatenated, running one after the other. To achieve what you want, you need to stop the current animation and start a new one:
$(function(){
$(window).scroll(function(){
var elementTop = $('body').offset().top,
position = elementTop+ $(window).scrollTop();
if (position >= 20){
$('#top').stop().animate({top: '40px'}, 300);
}
else if (position < 20) {
$('#top').stop().animate({top: '80px'}, 300);
}
});
});