show div after scrolling in mobile devices - javascript

i want show a div after scrolling 150px just in mobile devices.
this is my code but it doesnt work :
$(document).load($(window).bind("resize", checkPosition));
var phonebox = $(".phonebox");
function checkPosition()
{
if($(window).width() < 460)
{
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
phonebox.show();
}
else {
phonebox.hide();
}
});
}
}
can somebody help me to fix this problem.
thank you

You should not use bind but on instead. And use both resize and load in the same function.
bind is an old version of new added on see here > bind vs on
See jsfiddle
or snippet below ( i used 700 for example purposes only. so it works in snippet )
$(window).on("load resize", checkPosition)
var phonebox = $(".phonebox");
function checkPosition() {
if ($(window).width() < 700) {
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$(phonebox).show();
} else {
$(phonebox).hide();
}
});
}
}
.phonebox {
top:200px;
height:300px;
width:100px;
position:absolute;
background:red;
display:none;
}
.for_scroll {
height:1000px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="phonebox">
</div>
<div class="for_scroll">
</div>

Please try this one,
$(function(){
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
if(scroll >= 150){
phonebox.show();
}else{
phonebox.hide();
}
});
});

you can try this one as show() and hide() functions are not supported by some of the browsers so this could be a reason.
To hide:
$(".phonebox").css("display", "none");
To show:
$(".phonebox").css("display", "block");

Related

Changing element styles following scrolling from the top

I'm trying to apply a different style to the header whenever you scroll down from the top. Basically I want it so that if you are scrolled at the top then apply style 1, but if you are not scrolled at the top then apply style 2.
I have tried using a while and for loop to achieve this but both failed. The jQuery example below did work but for some reason not on this example. However I would rather use JavaScript than jQuery since I am learning JavaScript.
Can someone advise me what should I use for this: a while or if statement? And can someone tell me what I have done wrong with my attempts?
Thanks for any help.
// ATTEMPT 1
var headerWrap = document.getElementById('header-wrap');
var h = headerWrap.scrollTop;
function changeHeaderOpacity() {
"use strict"; // wtf is this?
while (h > 0) {
headerWrap.addClass('scroll-opacity-change');
}
headerWrap.removeClass('scroll-opacity-change');
}
// ATTEMPT 2
/*
var headerWrap = $('#header-wrap');
$(window).scroll(function() {
headerWrap.addClass('scroll-opacity-change');
if($(this).scrollTop() <= 0) {
headerWrap.removeClass('scroll-opacity-change');
}
});
*/
/*
// ATTEMPT 3
var headerWrap = document.getElementById('header-wrap');
var h = headerWrap.scrollTop;
function changeHeaderOpacity() {
"use strict"; // wtf is this?
if (h > 0) {
headerWrap.addClass('scroll-opacity-change');
} else {
headerWrap.removeClass('scroll-opacity-change');
}
}
*/
body{
height:1000px;
}
#header-wrap{
height:100px;
width:100%;
background:#0f0;
}
.scroll-opacity-change{
background:#f00;
}
<div id="header-wrap">
</div>
Well first of all, you need to add listener to detect window scroll.
$(document).ready(function() {
$(window).scroll(function() {
//do the header styling using .style
});
});
Now you need to store the scroll log in few variables to figure out you are scrolling down or not, you can the following using this:
var currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (currentScroll > lastScrollTop){
// You are down scrolling
} else {
// You are up scrolling
}
previousScroll = currentScroll;
Final code:
$(document).ready(function() {
previousScroll=0 //this means we are starting from top
$(window).scroll(function() {
var currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (currentScroll > previousScroll){
// Change header style cause you are down scrolling
} else {
// Do something else? You are up scrolling anyway...
}
previousScroll = currentScroll;
);
});
I hope this helps, your comments are welcomed.
Use class instead of id;
<div class="header-wrap">
</div>
and
$(window).scroll(function() {
$('.header-wrap').addClass('scroll-opacity-change');
if($(this).scrollTop() <= 0) {
$('.header-wrap').removeClass('scroll-opacity-change');
}
});

jQuery script not activating

I have made this jQuery script. Its purpose is to add a class to <body> when body is scrolled a certain amount. However nothing happens on scroll. DOM console doesnt show any error messages. I am a complete Javascript-newbie, so I would not be surprised if the problem is a simple markup mistake.
Any help is appreciated.
jQuery(document).ready(function() {
if ((window.screen.width / window.screen.height) >= 1.33){
$(document.body).on('scroll', function(e) {
if ($(this).scrollTop() > 200) {
$(document.body).addClass('fix');
} else {
$(document.body).removeClass('fix');
}
});
};
});
body{
height:200vh;
background-color:blue;
}
.fix{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
you want to listen to scroll event on window
Try
jQuery(document).ready(function() {
if ((window.screen.width / window.screen.height) >= 1.33) {
$(window).on('scroll', function(e) {
if ($(this).scrollTop() > 200) {
$('body').addClass('fix');
} else {
$('body').removeClass('fix');
}
});
};
});

add / remove class in jquery window scroll function not working - blogger

I ask for help, why my script is not working,
$(window).scroll(function() {
if ($(window).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
I tried to replace $(window).scroll(function() { with $(document).ready(function() { ,still does not work
for more details, you can open my page in versbubble.blogspot.com
You can use the following to make it work.
$(document).ready(function () {
if ($(window).scrollTop() > 1) {
$('header').addClass("sticky");
}
else {
$('header').removeClass("sticky");
}
});
Hope I am not too late, I had the same issue lately so I did something like this
$(document).ready(function () {
$(window).scroll(function() {
if ($(window).offset().top > 50){
$('header').addClass("sticky");
}
if ($(window).scrollTop() < 50){
$('header').removeClass("sticky");
}
});
});

Animate some divs only once

I am trying to animate some divs after the user scrolls to a specific position on the page. the problem is that i want it to happen only once. I used Boolean flags but it doesn't seem to like it.
What are u all suggest me to do?
::the code Its not even running
FYI I don't want to use PHP
var once = false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 && once == false) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
once = true;
}
)};
Thanks!
From your question
after the user scrolls to a specific position on the page
Listen to scroll event
$(document).ready(function() {
var once = false;
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760 && once==false){
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);
});
once=true;
}
});
)};
Alternative from comments. Check if element has a class (or attribute) or not. Below code checks if the element has the data-noanimate attribute. If yes it will not animate, if not it will animate and add data-noanimate so that it will animate once.
$(document).ready(function() {
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760){
$('.hash').each(function(i) {
if($(this).attr('data-noanimate') === undefined){
$(this).attr('data-noanimate','true').fadeOut(0).delay(1000*i).fadeIn(1000);
}
});
}
});
)};
var once=false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 &&once==false)
{
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);});
once=true;
}
});
Your brackets on the end of the ready function were flipped.
The other answer is correct, but it can be better like this:
$(function() {
$(window).on('scroll', function(){
if ($(window).scrollTop() > 760) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
// without boolean value,you can off `scroll` event
$(window).off('scroll');
}
})
});

hide sticky navigation when browser resize

I have create sticky navigation for my project and this sticky navigation must show only on desktop mininum 980px and hide below 980px on the fly when I resize my browser.
here is my code
if ($(window).width() > 980) {
$('.stickynav a').on('click', function(e) {
e.preventDefault();
});
$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();
if(scrolltop >= 132) {
$('.stickynav').fadeIn(250);
}
else if(scrolltop <= 210) {
$('.stickynav').fadeOut(250);
}
});
}
I create in jsfiddle
how can I resolve this?
You can do this in css with media queries.
#media only screen and (max-width: 979px) {
.stickynav{
display: none;
}
}
I've updated your fiddle: http://jsfiddle.net/cXH5g/2/
Media queries allows you to define css for specific devices/screen size.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
the best way to do this is using CSS3 media queries.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
but if you want to do it with jquery:
$(function(){
if ($(window).width() > 980) {
alert($(window).width());
$('.stickynav').on('click', function(e) {
e.preventDefault();
});
$(window).scroll(function() {
var scrolltop = $(this).scrollTop();
if(scrolltop >= 132) {
$('.stickynav').fadeIn(250);
}
else if(scrolltop <= 210) {
$('.stickynav').fadeOut(250);
}
});
}
});
I put an alert to see when you code should work.
check this fiddle

Categories

Resources