I can't figure out of to make scroll, (when a div is clicked), and make it smooth. (like not going straight to the scroll position)
Here's my code:
$('.about-center').click(function() {
var div = document.getElementById('ABOUT');
var pos = div.offsetTop;
$(window).scrollTop(pos);
});
try this one:
$('.about-center').click(function() {
var div = $('#ABOUT');
var pos = div.offset().top;
$('html, body').animate({scrollTop:pos},2000); // will take two seconds to scroll to the element
});
Related
I would like to have is to add a class to a div when it is, for example, 100 pixels of the top of the viewport. So not after scrolling 100px but when it is 100px below the top of the viewport. Can anybody help me with this?
<script>
jQuery(function() {
//caches a jQuery object containing the header element
var header = jQuery('#v0');
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 2939) {
header.addClass('fixed1');
}
else {
header.removeClass('fixed1');
}
});
});
</script>
Not sure if this is exactly you want to achieve, but here's the code. If the header is more than 100px away from the top (which is not very usual because then there should be something on top of the header) of the window, then the new class is added to the header.
$(function() {
var $header = $('#v0');
$(window).scroll(function () {
if ($header.offset().top - $(this).scrollTop() > 100) {
$header.addClass('blabla');
} else {
$header.removeClass('blabla');
}
});
});
UPDATE:
Depending on your feedback, this is the first solution that came up to my mind. I think that's the behavior you need. Hope that works for you:
$(function() {
var $header = $('header');
var $video = $('#v0');
var $videoContainer = $('.videoContainer');
$(window).scroll(function () {
// Here we check if video field touches the header, and add 'fixed' class
if ((($header.offset().top + $header.height()) - $video.offset().top) >= 0) {
$video.addClass('fixed')
}
// Since both video and header is fixed now I needed some other
// element to check if we are again getting away from the header
// (scrolling up again) That's why I added the $videoContainer element
// to be able to remove the 'fixed' class.
if ($videoContainer.offset().top > ($header.offset().top + $header.height())) {
$video.removeClass('fixed');
}
});
});
Updated code:
https://jsbin.com/foyoyus/6/edit?html,css,js,output
I'm using this code to make the navigation bar stick to the top of the page after scrolling:
var nav=$('body');
var scrolled=false;
$(window).scroll(function(){
if(175<$(window).scrollTop()&&!scrolled){
nav.addClass('stuck');
$('.navigation-class').animate({marginTop:80},1000);
scrolled=true;
}
if(175>$(window).scrollTop()&&scrolled){
$('.navigation-class').animate({marginTop:0},0,function(){nav.removeClass('stuck');$('.navigation-class').removeAttr('style');});
scrolled=false;
}
});
The problem is, if the user scrolls the page up and down quickly, and the navigation is STILL animating, it will continue the animation and then suddenly jump into it's designed position, which gives a hiccup effect to the menu.
Try to scroll this page quickly to see it in live.
Is it possible to make it run smoothly like other websites?
Thanks are in order.
Edit:
After rereading the question, I realized the problem is probably that you're not cancelling the animation when the user scrolls back above 175px.
Presumably you're applying position: float to your nav element? Are you removing float as soon as the user scrolls up?
Try setting the queue option to false (see https://api.jquery.com/animate/), so the animation doesn't wait for the other one to complete.
Maybe you could try getting rid of the JQuery animation and replacing it with CSS transitions?
Maybe something like this?
var nav=$('body');
var scrolled=false;
var scrollToggle = function(){
$(window).off('scroll');
if(175<$(window).scrollTop()&&!scrolled){
nav.addClass('stuck');
$('.navigation-class').animate({marginTop:80},1000, function() {
$(window).on('scroll', scrollToggle);
);
scrolled=true;
}
else if(175>$(window).scrollTop()&&scrolled){
$('.navigation-class').animate({marginTop:0},0,function({
nav.removeClass('stuck');
$('.navigation-class').removeAttr('style');
$(window).on('scroll', scrollToggle);
});
scrolled=false;
}
};
$(window).on('scroll', scrollToggle);
I have something similar in a WIP myself. I'll post it here only slightly edited, maybe it can be useful to you.
var headerFloat = function() {
//Header
var pageHeader = $('#pageHeader'), pos = '',
headerMain = $('#headerMain'), headerMainHeight = '',
content = $('#content'), contentPadding = '',
pageTitle = $('h1.currentPage'), pageTitleTop = '';
if($(window).scrollTop() >= 95) {
pos = "fixed";
headerMainHeight = '75px';
contentPadding = '225px';
pageTitleTop = '55px';
contentHeaderTop = '130px';
}
//Header
pageHeader.css('position', pos);
headerMain.css('height', headerMainHeight);
content.css('padding-top', contentPadding);
pageTitle.css({ 'transition': 'all 0s', 'position': pos, 'top': pageTitleTop });
pageTitle[0].offsetHeight; //force "reflow" of element -- stackoverflow.com/questions/11131875/#16575811
pageTitle.css('transition', '');
};
$(document).ready(function() {
/* *** SCROLL -> FLOAT HEADER *** */
$(window).on("scroll.float", headerFloat);
});
Inputting '' (empty string) in the JQuery css function resets it to the original value. You should do that instead of .removeAttr('style');
I would also avoid the scrolled boolean. I think you need it anyway, if scrollTop < 175, you'll never be scrolled, and vice versa.
So I am trying to get an image to have a parallax scrolling effect, buts its not working. Got any idea on why it isnt working?
$(function() {
// Cache the Window object
var $window = $(window);
// Parallax Backgrounds
// Tutorial: http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // end window scroll
});
});
https://jsfiddle.net/0382k30q/
You need to change this:
$('section[data-type="background"]').each(function(){...
to this:
$('div[data-type="background"]').each(function(){...
The backgrounds aren't applied to the section element. They are applied to a div element.
Also, don't forget to include JQuery/JQuery UI in your fiddles.
Updated Fiddle: https://jsfiddle.net/0382k30q/7/
I have implemented horizontal scroll as shown in this fiddle :
fiddle
What I want to do is to stop scrolling after it has scrolled 1 div and then continue from where it left after clicking the next/prev button. Right now it is continuing to scroll until it reaches end but I want to stop scrolling after 1 div. How can this be done ?
function startScrolling(modifier, step) {
if (scrollHandle === 0) {
scrollHandle = setInterval(function () {
var newOffset = parent.scrollLeft() + (scrollStep * modifier);
parent.scrollLeft(newOffset);
}, 10);
}
}
function stopScrolling() {
clearInterval(scrollHandle);
scrollHandle = 0;
}
You can use animate method and inside the argument,put the new scrollLeft position you want.
Something like:
.animate({scrollLeft:'+=200'},1000);
The width of your div is 500,so if you put this in the code above,scrolling will stop after one div.
I am developing a website which have a scrolling newsticker in a strip using jquery.li-scroller.1.0.js.
page address is: http://www.designforce.us/demo/ticker/index.html
When we hover the mouse on the newsticker, strip is stop. At this stage i want to show a popup box right under the current li with its text. something i've done and when we hover the mouse pointer over the strip, newsticker stops and box is showing with its text.
PROBLEM:
jquery.li-scroller newsticker have a wrapper with {overflow:hidden} so if i add the popup box withing li then its not showing. Thats why i've coded the popup (.tickPop) withing a seperate space and white some script of jquery document ready. my script is:
$('ul#ticker01 li').each(function(e){
var iClass;
$(this).hover(function(){
iClass = $(this).attr('class');
$(this).css('height',$('tickPop').height()+30)
var offset = $(this).offset();
var left = offset.left;
var top = offset.top+20;
var iWidth = $(this).width();
var sText = $(this).children().html();
$(this).css('background','#f6f4f4');
$('.tickPop').css('left',left);
$('.tickPop').css('top',top);
$('.tickPop').css('width',iWidth);
$('.tickPop').css('display','block');
$('.tickPop').text(sText);
}, function(){
$('.tickPop').mouseleave(function(){
bHovering = false;
$(this).css('display','none');
});
$(this).css('background','transparent');
//$('.tickPop').css('display','none');
if(iClass == 'Yellow')
$(this).css('background','url(images/icon-yellow.jpg) left center no-repeat');
else
$(this).css('background','url(images/icon-white.jpg) left center no-repeat');
});
});
popup box called $('.tickPop') is hidden by default and when user hover on newsticker then jquery function set the attribute $('.tickPop').css('display','block') and it is visible.
Now problem is that as we move the mouse pointer over the popup box then newsticker is again start scrolling while i want when we mouseleave from the popup box then newsticker should start.
Dear Experts, Please advise..............?
Looking forward for a kind response.
Regards
You should modify jquery li-scroller sources.
watch this code (from li-scroller sources):
function scrollnews(spazio, tempo){
$strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
}
scrollnews(totalTravel, defTiming);
// $strip = $(this) so it triggers when you're hover a news
$strip.hover(function(){
jQuery(this).stop();
},
function(){
var offset = jQuery(this).offset();
var residualSpace = offset.left + stripWidth;
var residualTime = residualSpace/settings.travelocity;
scrollnews(residualSpace, residualTime);
});
You should add something like:
var popup = jQuery('.tickPop');
popup.hover(function(){
$strip.stop();
},
function(){
var offset = jQuery(this).offset();
var residualSpace = offset.left + stripWidth;
var residualTime = residualSpace/settings.travelocity;
scrollnews(residualSpace, residualTime);
});
I didn't test that code but should work....
P.S. Sorry for the indentation