I am trying to make an animation happen once the webpage is at a certain part of the page. I have looked at other people queries and my problem is similar but it does not work.
here is the code:
if($('html,body').scrollTop() > 400) {
$('.fish_one').animate({"margin-left":"+=65%"},1000);
$('.fish_two').animate({"margin-left":"-=10%"},1000);
$('.left').animate({"opacity":"+=1"},1000);
$('header').css({"background-color":"#fff"});
$('header a').css({"color":"#94d9f8"});
}
You need to check the if statement every time the page scrolls, not just on load. Use $(window).scroll(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 400) {
alert("lower");
}
});
Fiddle
EDIT: to prevent the function from repeating itself:
var pos = false;
$(window).scroll(function(){
if(($(window).scrollTop() > 400) !== pos ){
alert("changed");
}
pos = $(window).scrollTop() > 400;
});
OR
var pos = false;
$(window).scroll(function(){
if(($(window).scrollTop() > 400) && !pos ){
alert("just passed breakpoint");
}
pos = $(window).scrollTop() > 400;
});
New Fiddle
Try adding it to an event listener like this:
var eventTriggered=false;
$(document).on( 'scroll', function(){
if($(document).scrollTop() > 400 && !eventTriggered) {
alert("success");
eventTriggered=true;
}else if($(document).scrollTop() < 400){
eventTriggered=false;
}
});
This one works
Related
I want my scroller to hide when you come to bottom of page.
I wrote this code and it works fine:
<script>
document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById("scroller").style.display='hide';
}
}
</script>
But now the scroller is hidden also when you go back to top.
I want to show #scroller again when user scroll back to top.
Simply add an else case that display it:
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById("scroller").style.display='none';
}
else{
document.getElementById("scroller").style.display='block';
}
$(document).ready(function(){
$("div").scroll(function(){
if($("div").scrollTop()==0)
$("scroller").show();
else
$("scroller").hide();
});
});
In JQuery you can use this.
Try Following
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$('#scroller').hide('slow');
}
else if($(window).scrollTop()==0)
{
$('#scroller').show('slow');
}
});
<script>
document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById("scroller").style.display='hide';
} else {
document.getElementById("scroller").style.display='block';
}
}
</script>
I've put in a html several divs with IDs in a row prepended with the letter d, e.g: #d1, #d2, #d3... Then i created the javascript code below:
var pos = 0;
$("#button-up").on('click', function(e) {
e.preventDefault();
if(pos > 1){
pos -= 1;
$("html, body").stop().animate({
'scrollTop': $("#d"+pos).offset().top-300},200,"swing");
};
});
$("#button-down").on('click', function(e) {
e.preventDefault();
if(pos < 10){
pos += 1;
$("html, body").stop().animate({
'scrollTop': $("#d"+pos).offset().top-300},200,"swing");
};
});
window.addEventListener("scroll", function(event) {
var posi = this.pageYOffset;
if(posi-(pos-1)*1070+50 >= 1070){pos += 1} else if((pos-1)*1070+50-posi <= -1070){pos -= 1};
});
Finally my site scrolls down when i click the button-down, but i need to click twice the button-up for it scrolls up. Why? Is there a better way than this that gets the expected result?
I made it work changing this part:
window.addEventListener("scroll", function(event) {
var posi = this.pageYOffset;
if(posi-(pos-1)*1070+50 >= 1070){pos += 1} else if((pos-1)*1070+50-posi <= -1070){pos -= 1};
});
with this one:
window.addEventListener("mousewheel", function(e) {
e.preventDefault();
console.log('passou por 6');
var evt = window.event || e //equalize event object
evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible
var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF
if(delta > 0) {
if(pos > 1){
console.log('passou por 3');
pos -= 1;
$("html, body").stop().animate({
'scrollTop': $("#d"+pos).offset().top-300},200,"swing");
};
//scroll up
console.log('cima');
}
else{
if(pos < 10){
pos += 1;
$("html, body").stop().animate({
'scrollTop': $("#d"+pos).offset().top-300},200,"swing");
};
console.log('baixo');
//scroll down
};
});
Use jquery scoll function
$(window).scroll(function(event){
// your code
});
So basically I am just trying to change the CSS class of a specific element upon scrolling. This worked great when using this code:
$(window).bind('scroll', function() {
if ($(window).scrollTop() >= 270) {
$('.homeLink').addClass('selected');
}
else {
$('.homeLink').removeClass('selected');
}
});
However, I want to remove the class upon scrolling further. So I tried using this code:
$(window).bind('scroll', function() {
if ($(window).scrollTop() >= 270 && < 300) {
$('.homeLink').addClass('selected');
}
else {
$('.homeLink').removeClass('selected');
}
});
When using the 2nd code, it just doesn't work at all. Meaning, nothing changes.
I know I am just being stupid and doing this wrong, but I am not sure how to fix it. I am pretty big noob when it comes to js. Any help would be very appreciated.
EDIT:
I have also tried this with no luck:
$(window).bind('scroll', function() {
if ($(window).scrollTop() >= 270 && $(window).scrollTop() < 300) {
$('.homeLink').addClass('selected');
}
else {
$('.homeLink').removeClass('selected');
}
});
This is the correct sintax:
if ($(window).scrollTop() >= 270 && $(window).scrollTop() < 300) {
Try this:
if($(this).scrollTop()>= 270 && $(this).scrollTop() < 300){
i have this little script where i try to detect the window size to apply the limit of caracters of an element.
the problem the detection is not working. Always apply the limit of 150.
i have set an alert to look if detect or not, and now i´m sure that he is always apply the same.
can someone help me to find out what is wrong with this script?
here is my code:
$(function () {
$(".block6 p").each(function (i) {
len = $(this).text().length;
if (len > 10) {
if ($(window).width() <= 1280) {
$(this).text($(this).text().substr(0, 150) + '...');
}
else if ($(window).width() > 1280) {
$(this).text($(this).text().substr(0, 10) + '...');
}
}
});
});
Your code only runs once, on document.ready. You need to run the test every time the window is resized:
$(window).on('resize',function() {
if ($(window).width() <= 1280) {
$(".block6 p").each(function (i) {
var len = $(this).text().length;
if (len > 10) {
$(this).text($(this).text().substr(0, 150) + '...');
}
});
} else { //if ($(window).width() > 1280) {
$(".block6 p").each(function (i) {
var len = $(this).text().length;
if (len > 10) {
$(this).text($(this).text().substr(0, 10) + '...');
}
});
}
});
$(document).ready(function() {
$(window).trigger('resize');
}
http://jsfiddle.net/mblase75/6PQ4Q/
That said, you have a problem in that you're altering the text of each element directly, so switching back and forth by resizing the browser will be destructive. I suggest using text-overflow: ellipsis instead if possible.
If user up, then hide the element. A div.
i have something:
<script>
window.onscroll = function()
{
if (document.documentElement.scrollTop > 900 || self.pageYOffset > 900) {
$('#divId').css('display','block');
} else if (document.documentElement.scrollTop < 900 || self.pageYOffset < 900) {
$('#divId').css('display','none');
}
}
</script>
But not work.
Something like this:
$(window).scroll(function () {
var $someDiv = $("#someDiv"),
top = $(this).scrollTop();
if (top > 200) {
$someDiv.show();
} else {
$someDiv.hide();
}
});
See this Fiddle.