I have this big photo which takes 100%x100% of screen size and above it there is fixed slider.
I want to fadeout (hide) this green logo when you scroll down from this big header photo leaving navigation bar without it.
How can I do that?
http://i.stack.imgur.com/BiUfE.jpg here is photo
If you want the logo to scroll with the page, just put it outside of the menu bar in your HTML and use position absolute (JS Fiddle).
If you want it to fade out once it leaves the slider, you can use jQuery, here is an example:
//Some variables, to avoid calculating these values at every scroll
var logo = $('#logo');
var sliderBottom = $('#slider').offset().top + $('#slider').height() - logo.height();
//On every scroll
$(window).scroll(function(){
// if we're past the slider and the logo is still visible
if($(window).scrollTop()>sliderBottom && logo.is(':visible')){
logo.stop().fadeOut(300);
}
// if not
else if($(window).scrollTop()<sliderBottom && logo.is(':hidden')){
logo.stop().fadeIn(300);
}
});
JS Fiddle Demo
Related
I'm working on a new portfolio for myself, using Bootstrap framework and I want to animate my slider based on the direction that the user is scrolling.
For example I already have an animation to slide the navbar class in. But as the user scrolls down the page I want to hide the navbar this is to give the user more visibility on the screen when browsing content. Then when they attempt to scroll back up the page I want to slide the .navbar class back in again.
Now I can easily get this to work if I target a specific element or pixel height, but that doesn't help me. I know it's achievable as I've seen it on several websites (LinkedIn for example).
So I'm wondering if it's a case of targeting positive or negative values on the y axis or something?
var lastScrollPosition = 0;
window.onscroll = function() {
var newScrollPosition = window.scrollY;
if (newScrollPosition < lastScrollPosition){
//upward - code here
}else{
//downward - code here
}
lastScrollPosition = newScrollPosition;
}
https://rebecca-milazzo-test.squarespace.com/featured#/btr/
I have the page meta-data set to fixed positioning, but as the users scroll, the div doesn't stop and scrolls under the thumbnails at the bottom of the page. I have researched other scripts, but they all are created to stop the div at a certain pixel height and not another element.
Any help is greatly appreciated.
You're going to want to create a function that checks the windows scroll position to see whether you've scrolled to the thumbnails section. When you've scrolled to the thumbnails section, set the fixed elements position to absolute and set its top to the windows scroll position plus the original top value. For those like myself who thought z-index would suffice, OP doesn't want the element to go either underneath the thumbnails section or above the thumbnails section on scroll.
function checkposition(){
fixedelement = document.querySelector(".project-meta");
stopelement = document.querySelector("#project-thumbs");
stoppoint = stopelement.scrollTop - fixedelement.clientHeight - parseInt(fixedelement.style.top);
if (window.scrollY >= stoppoint){
fixedelement.style.position = "absolute";
fixedelement.style.top = [defaulttophere] + window.scrollY + "px";
} else {
fixedelement.style.position = "fixed";
fixedelement.style.top = [defaulttophere];
}
}
window.addEventListener("scroll", checkposition);
Let me know if this works or not, I threw this together pretty quickly.
I have seen some scrolling effects for example on Google SketchUp's site, their banner is initially "built into the page" and then it seems to pop out and remain stuck at the top after a certain position down (scrolling).
Google Plus seems to have some special effects as well, like changing the banner entirely once the scrolling has reached a certain position.
Attached is what I am trying to accomplish. A square logo is on the right, and then when the page is scrolled down, the logo starts to scale to the same height as the banner/header / fade and then becomes a word rather than the image.
What am I looking at here? jQuery or javascript? How do I track the scrolling and connect the two?
Is it what you want to achieve?
http://jsfiddle.net/agdbd8x6/15/
If so, it is quite easy. If you use jQuery, attach 'scroll' event handler and check current scroll position. Show the image only with zero scroll position:
var img = $('#image');
var txt = $('#text');
$(".container").scroll(function(){
txt.text('Scroll position = ' + $(this).scrollTop());
var showImage = $(this).scrollTop() == 0;
if (showImage){
img.css('display', 'inline');
txt.hide();
}
else{
img.hide();
txt.css('display', 'inline-block');
}
});
I tried to make changing background effect append to the body when page scrolls within specific amount which scroll at 50%,20%,10% rate of page
Here is what i got so far Full Screen Fiddle
Below is the sample code :
HTML :
<div>
<p>...</p>
<!-- more <p> elements below -->
</div>
And the script :
jQuery(window).scroll(function () {
var JarakScroll = 200; // jarak scrol
var JumlahJarakPasScroll = jQuery(window).scrollTop();
if (JumlahJarakPasScroll > JarakScroll) {
jQuery('html').addClass('scrolled');
} else {
jQuery('html').removeClass('scrolled');
}
});
The background was changing but with no effect, anyone can help applying nice effect ?
If you want the background image to change with a nice effect it might be better if you have the background images applied to two divs that have 100% width and 100%height of the body and are placed correctly with z-index.
More specifically, place the first div on top of the second div and when you want the background image to change, fadeOut the first div. That'll be a neat effect. I'm assuming you can code this on your ownn.
I currently have a sidenavigation bar which continually checks the users scroll position and if it is greater than a specified .slide height, it adds a class .current to a certain div on a sidebar making it turn orange and thus indicates which part of a page the user is on. Right now, the code only works for one specific height of .slide but I would like to modify it so that each slide (i.e. slide red, slide green, slide blue which are the divs with the colored background) can be of different heights since my content for each section will vary in length.
The fiddle can be found here
JavaScript:
$(document).scroll(function() {
if($(window).scrollTop() > $('.slide').height()*$('.current').index()){
$('.current').removeClass('current');
var newSlide = Math.floor($(window).scrollTop() / $('.slide').height());
$('.sidenavigation li:eq('+newSlide+')').addClass('current');
}
if($(window).scrollTop() < $('.slide').height()*$('.current').index()){
$('.current').removeClass('current');
var newSlide = Math.floor($(window).scrollTop() / $('.slide').height());
$('.sidenavigation li:eq('-newSlide-')').addClass('current');
}
});
I was trying to help you with your code and then i realize how hard it is, so I know it is probably not what you really want, but I recommend you a great jQuery plugin, which will solve your problem very fast: http://imakewebthings.com/jquery-waypoints/