When I scroll and the anchor touches the top of the window, the background color of the box is supposed to change but I can't seem to get it to work properly.
https://jsfiddle.net/6p2pnnq4/1/
var scrollFn = function() {
var targetOffset = $(this).find(".anchor-point")[0].offsetTop;
console.log('Scrolling...');
if ($(this).scrollTop() > targetOffset) {
$(this).find(".footer_wrap").addClass("topper");
} else {
$(this).find(".footer_wrap").removeClass("topper");
}
};
$(window).scroll(scrollFn);
You don't need the
$(this).find
It is useless, try the following:
var targetOffset = $('#footer_wrap').offset().top,
$window = $(window);
$(window).on( 'scroll', function(){
if ( $window.scrollTop() >= targetOffset ) {
$("#footer_wrap").addClass("topper");
}else{
$("#footer_wrap").removeClass("topper");
}
});
And The CSS
#footer_wrap {
margin-top: 200px;
height: 130vmax;
background-color: #f4f4f4;
-ms-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#footer_wrap.topper {
background-color: #000;
}
Then when #footer_wrap is at the top it will change the background.
Check out the Fiddle
Related
hi i was doing a search about how to make my navbar fadeIn while scrolling down and fadeOut while scrolling Up and found nice topic helped me alot
Fading bootstrap navbar on scrolldown, while changing text color
also http://jsfiddle.net/f5UTL/
the problem is it's not fading in or out while scrolling its just appear and disappear no dynamic animation it's even moving my page while this process it is appreciated if some one told me where was my mistake at
< script >
$(function () {
var header = $('.opaque');
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 300) {
header.removeClass('opaque').addClass('navbar-fixed-top').fadeIn();
} else {
header.removeClass('navbar-fixed-top').fadeOut().addClass('opaque');
}
});
});
< /script>
.navbar-fixed-top {
background-color: rgba(128,128,128,1);
transition: background-color all 2s;
-webkit-transition: background-color all 2s;
-moz-transition: background-color all 2s;
-o-transition: background-color all 2s;
}
.navbar-fixed-top .opaque {
background-color: rgba(128,128,128,0);
transition: background-color all 2s ;
-webkit-transition: background-color all 2s ;
-moz-transition: background-color all 2s ;
-o-transition: background-color all 2s ;
}
here is the simplified version of what you want to achieve .
$(function() {
//caches a jQuery object containing the header element
var header = $('#nav');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= header.height()) {
header.fadeOut();
} else {
header.fadeIn();
}
});
});
Hope it will help you to continue.
updated fiddle.
Im using scrolling-nav-js Scrolling nav to animate padding and fix my navbar to the top of my page and i want to give the navbar a subtle opacity animation. How can i add the transition to change the opacity property?
I have the following code in the JS and the CSS files:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
#media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
Nevermind :) adding this is perfect.
transition: background .5s ease-in-out,padding .5s ease-in-out, opacity .5s ease-in-out,opacity .5s ease-in-out;
and
.top-nav-collapse {
padding: 0;
opacity: 0.6;
When I load the page, the div is at the top of the screen, but when I start the scroll, it jumps to where it is supposed to be.
Check out the website here:
calretirement.com/classes-test.php
CSS:
.register{position:fixed !important; bottom:120px !important; width: 340.453px;
margin-top: 29px;
}
#stickyForm2015 {-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
jQuery:
<script>
$(window).scroll(function(){
if
($(window).scrollTop() > 670){
$("#stickyForm2015").addClass("register");
}
else
{
$("#stickyForm2015").removeClass("register");
updateSliderMargin();
}
});
</script>
<script>
$(window).on("scroll", function(){
if
($(window).scrollTop() > 2500){
$("#stickyForm2015").removeClass("register");
updateSliderMargin();
}
});
</script>
Open to suggestions!! Need help!
If you want to animate scroll with jquery you can just do:
$('html, body').animate({scrollTop: '0'}, 400);
If you want to animate with css you need to animate from something to something, your classes don't appear to be doing that.
.original-class{
position: relative;
top: 500px;
transition: top .4s ease-in-out; //only necessary if you plan on animating back
}
.animate-original-class{
top: 0;
transition: top .4s ease-in-out;
}
Please look at the next fiddle and help me understand why in Firefox, the alerts aren't fired.
HTML
<div class="test1">TEST1</div>
CSS
.test1 {
opacity: 0;
width: 300px;
height: 150px;
background-color: blue;
transition: opacity 0.2s 0 ease-in;
&.fade-in {
opacity: 1
}
}
JS
$(".test1").ready(function(){
$(".test1").one("webkitTransitionEnd transitionend MSTransitionEnd oTransitionEnd transitionEnd", function(event){
alert("transition fired");
if ( event.target == event.currentTarget ) {
alert(event.target);
}
});
setTimeout(function(){
$(".test1").addClass("fade-in");
},1000);
});
Updated code and fiddle
add -moz- at defor of animation property
-moz-transition: PROPERTY or CSS CLASS NAME .3s ease;
example:
-moz-transition: width .3s ease;
-moz-transition: fade-out .3s ease;
I wish to create an animation where upon every click of a button, an object moves a certain amount to its right.
e.g If the initial position of the object was say "left:10px" and every 1 loop of animation moves it by say 10px, then after first click it should be at 20px, after second click it should be at 30px and so on.
Here's my code right now:
JavaScript
document.getElementById( 'move-me' ).addEventListener( 'click', function () {
var move = document.getElementById( 'move' );
move.style.left = ( move.offsetLeft + 10 ) + 'px';
}, false );
HTML
<button id="move-me">Move</button>
<div id="move"></div>
CSS
#move {
background: green;
height: 50px;
left: 0px;
position: absolute;
top: 100px;
transition: left 250ms ease-in-out;
-moz-transition: left 250ms ease-in-out;
-ms-transition: left 250ms ease-in-out;
-o-transition: left 250ms ease-in-out;
-webkit-transition: left 250ms ease-in-out;
width: 50px;
}
This code uses CSS3 transitions but it doesn't make use of the -webkit-transform hardware acceleration on my android device. How do I fix that?
The choice is not between -webkit-transform and -webkit-transition, it's between left and -webkit-transform.
Here is how to make use of 3d acceleration:
#move {
background: green;
height: 50px;
left: 0px;
position: absolute;
top: 100px;
-moz-transition: -moz-transform 250ms ease-in-out;
-ms-transition: -ms-transform 250ms ease-in-out;
-o-transition: -o-transform 250ms ease-in-out;
-webkit-transition: -webkit-transform 250ms ease-in-out;
transition: transform 250ms ease-in-out;
width: 50px;
}
Javascript:
document.getElementById( 'move' ).addEventListener( 'click', function() {
var move = document.getElementById( 'move' );
var transform = "translate3d("+ (move.offsetLeft+200) + "px, 0, 0)";
move.style.webkitTransform = transform;
move.style.mozTransform = transform;
move.style.msTransform = transform;
move.style.oTransform = transform;
move.style.transform = transform;
}, false );
http://jsfiddle.net/CjQ8H/
You can also use translateX. This defintely hardware accelerates.
targetDiv.style.webkitTransition = "0ms"
targetDiv.style.webkitTransform = "translateX(100%)
This would move a div to the right by 100% but nice and smooth only in hardware accelerated devices.