hide sticky navigation when browser resize - javascript

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

Related

show div after scrolling in mobile devices

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");

scroll event not working on mobile

Setch.me loading normally on desktop but not trigerring on mobile unless if I click on photographers/makeup artists, I've added height=device-height after searching for a solution here but that didn't work.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
track_page++;
load_contents(track_page);
}
Try this:
$(document.body).on('touchmove', onScroll); // for mobile
$(window).on('scroll', onScroll);
// callback
function onScroll(){
if( $(window).scrollTop() + window.innerHeight >= document.body.scrollHeight ) {
track_page++;
load_contents(track_page);
}
}
var addition_constant = 0;
$(document.body).on('touchmove', onScroll); // for mobile
$(window).on('scroll', onScroll);
function onScroll() {
var addition = ($(window).scrollTop() + window.innerHeight);
var scrollHeight = (document.body.scrollHeight - 1);
if (addition > scrollHeight && addition_constant < addition) {
addition_constant = addition;
loadmorecontest();
}
}
The "scrollTop" value must be rounded on mobile devices using "Math.ceil". (It's decimal based on the resolution of the screen), so:
if (el.scrollHeight <= Math.ceil(el.scrollTop) + el.offsetHeight) {
// so something...
}
In addition to previous comments, $(window).scrollTop()
seems not to work on mobile and should be replaced with document.body.scrollTop
It seems bit irrelevant but since I found myself here and my reason that it not worked is the element that I was trying to scroll has;
overflow-y: hidden
When I remove that it worked perfectly. I just wrote that for if it is also someone's case.
Hi you didn't close correctly your event, this should be like this:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
track_page++;
load_contents(track_page);
}});

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');
}
});

How to bind function to window width?

How can I bind this function to the window width?
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 0) {
jQuery('.navbar-header').slideUp("slow");
} else {
jQuery('.navbar-header').slideDown("slow");
}
});
From your add explain, you can change responsive change your render based on the width of window.So, the only way to do this, is to change the handler.
jQuery(window).scroll(function() {
if (jQuery(document).width() < = 992) {
if (jQuery(this).scrollTop() > 0)
{
jQuery('.navbar-header').slideUp("slow");
}
else
{
jQuery('.navbar-header').slideDown("slow");
}
}
});
By this way, If you change the browser width, will change the show of scroll.

Detect div scroll bar hit the top

how to detect when div scroll bar, scroll up and hit the top(only when it hit the top)
I have found another post, but this one is hit the bottom.
what i need is hit the top. anyone know how to change this?
$("#divID").scroll(function(){
if($(this)[0].scrollHeight - $(this).scrollTop() <= $(this).outerHeight())
{
alert(1);
}
});
Know when vertical scrollbar hits bottom of scroll in div
working fiddle
var el = $('.test');
el.on('scroll', function(){
if(el.scrollTop() == 0){alert("i just hit the top")}
});
scrollTop will be 0 when the scroll bar is that the top. Try this:
$("#divID").scroll(function () {
if ($(this).scrollTop() == 0) {
alert(1);
}
});
Example fiddle
$("#divID").scroll(function(){
if($(this)[0].scrollHeight - $(this).scrollTop() <= $(this).outerHeight())
{
alert("Bottom");
}
if($(this).scrollTop() == 0)
{
alert("Top");
}
});
Fiddle is here

Categories

Resources