I need a mobile navigation to stick after the user has scrolled a certain amount. When a user has scrolled 205px on desktop resolution the navigation will stick no problem.
How do I change this to 64px after the screen size has gone below 767px? and how do I cancel the desktop jQuery from taking effect on a mobile?
Current desktop javascript:
$(window).scroll(function(){
if ($(this).scrollTop() > 205) {
$('.sidemenu').addClass('fixed');
} else {
$('.sidemenu').removeClass('fixed');
}
});
Current mobile javascript:
function checkPosition() {
if (window.matchMedia('(max-width: 767px)').matches) {
$(window).scroll(function(){
if ($(this).scrollTop() > 64) {
$('.sidemenu').addClass('fixed');
} else {
$('.sidemenu').removeClass('fixed');
}
})
}
};
Suggestions would be much appreciated.
Thank you.
You can add a class mobile to your body for example when the matchmedia matches.
$(document.body).toggleClass('mobile', window.matchMedia('(max-width: 767px)').matches);
Once you have that, the checkPosition simply has to get the proper scrollTop value.
function checkPosition() {
var scrollY = $(document.body).hasClass('mobile') ? 64 : 205;
$('.sidemenu').toggleClass('fixed', $(window).scrollTop() > scrollY);
};
Or simply add the matchMedia test instead of the hasClass test.
Additionally, I expect the height of the "fixed container" to be dynamic.
Maybe something like:
var scrollY = $('header').height(); // just an idea ofcourse to get 64 or 205.
You can check screens size in resize wvent like this
var width;
$(window).resize(function () {
width = $("html").width();
});
than in scroll event (or in other place) you can check:
if (width <= 767) {
// do some for small screen
}
else if (width > 767 && width < 1200) {
// do some for medium screen
}
//if..
Related
I want my navbar to be transparant on the top and bottom of my page but i want it to not be transparant in the middle. When i have my webpage on full screen this works:
$(window).on("scroll", function () {
if ($(window).scrollTop() > 720 && $(window).scrollTop() < 1450 ) {
$(".nav").addClass("active");
} else {
$(".nav").removeClass("active");
}
})
But when it gets resized this wont work anymore because the sizes change. Is there a way to do this with % instead of just normal numbers so it will be responsive?
It occur because you hardcoded your height values. Check the whole site height, divide it on three and incorporate this variables to your if statement. Every time you resize browser window it will recalculate your new position.
window.addEventListener('resize', function() {
//one third and two third of website
oneThird = window.scrollHeight / 3;
twoThird = onethird * 2;
if ( $(window).scrollTop() > oneThird && $(window).scrollTop() < twoThird ) {
$(".nav").addClass("active");
} else {
$(".nav").removeClass("active");
}
}
You can use Media Queries with JS too, so you can do certain things on your desired window size, this might help https://www.w3schools.com/howto/howto_js_media_queries.asp
I have a page if you click you are gonna see demo page and there is a fixed menu which is hidden.
after scroll page to down you'll see fixed menu set as display:block as you see on image:
but after appear if I'm resizing to window and if I turn normal desktop mode after scroll page to up as you see my fixed menu is not hiding
and another problem is if you open page mobile emulator (like on this emulator)[http://mobiletest.me/google_nexus_7_emulator/?u=http://firatabak.com/test/tur_detay.html] normally menu has to be show when I scroll page to down but it's not.
JS CODE
var navOffset = jQuery(".after-scroll-sticky").offset().top;
jQuery(window).scroll(function(){
var scrollPosition = jQuery(window).scrollTop();
if(scrollPosition >= navOffset){
jQuery(".sticky-navbar").fadeIn().addClass("fixed");
}else{
jQuery(".sticky-navbar").fadeOut().removeClass("fixed");
}
});
if ($(window).width() < 768) {
var navOffset2 = jQuery(".after-scroll-sticky").offset().top+200;
jQuery(window).scroll(function(){
var sP = jQuery(window).scrollTop();
if(sP >= navOffset2){
$(".sticky-navbar").addClass("fadeOutRightBig");
$(".menu-btn").fadeIn("fast");
}else{
$(".sticky-navbar").removeClass("fadeOutRightBig");
$(".menu-btn").fadeOut("slow");
}
});
}
Since you're defining the second jQuery.scroll function within an if statement, it only becomes active if the window width is less than 768px at the moment the script runs - it doesn't kick in when the window is resized. Instead you could try this format:
jQuery(window).scroll(function(){
if ($(window).width() < 768) {
// calculations and animation go here
}
});
Or better yet, combine the two jQuery.scroll functions together:
jQuery(window).scroll(function(){
var navOffset = jQuery(".after-scroll-sticky").offset().top,
scrollPosition = jQuery(window).scrollTop();
if ($(window).width() < 768) {
if (scrollPosition >= navOffset + 200) {
// ...
} else {
// ...
}
else if (scrollPosition >= navOffset) {
// ...
} else {
// ...
}
});
Then just make sure that you're undoing the changes made in other cases before applying the new changes.
Given a script that makes the sidebar sticky when the user scrolls to a certain point (on desktop), this currently creates an issue where the footer doesn't show at the bottom on mobile/tablet devices, but gives the footer an infinitely scrollable blank space. How can I target the script to only work on desktop browsers?
I've tried targeting the desktop with a variation of navigator.userAgent.match == "", but this is disabling the functionality.
When the user is coming from a mobile/tablet, the footer should just show up on the page at the bottom as if the javascript function wasn't loaded.
$(function() {
var $sidebar = $(".related-articles"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
}, 1);
} else {
$sidebar.stop().animate({
marginTop: 0
}, 1);
}
});
});
UPDATE: adding $(window).width() > 767 && to the first if(); statement fixed the issue.
I think you're looking for something like this:
if ( $(window).width() > 739) {
//Code here for any desktop
}
else {
//Code here for mobile
}
You can find device width sizes here:
http://mydevice.io/devices/
I'm running a script on my page that make the div id="homesplash" disappear when user scrolls beyond 600px as follows:
$(window).scroll(function() {
if ($(this).scrollTop()>600)
{
$('#homesplash').hide();
}
else
{
$('#homesplash').show();
}
});
I need to figure out how to run this script only if the browser width is greater than 1024px. Any ideas?
I've tried to implement some code from a related post I found here, but I can't get it to work as I am unfamiliar with writing any javascript.
Thanks.
You can check $(window).width() and compare it to 1024. Something like:
$(window).scroll(function() {
if ( $(this).width() > 1024 ) {
$("#homesplash").toggle( $(this).scrollTop() <= 600 );
}
});
Working with your current code, you could use $(window).width() to get the width:
$(window).scroll(function() {
var windowWidth = $(window).width();
if (windowWidth > 1024) {
if ($(this).scrollTop() > 600) {
$('#homesplash').hide();
}
else {
$('#homesplash').show();
}
}
});
I have this page and I want the sidebar to slide down with the user and it works well but if you are on a small screen like 1024 * 768 you will not see the bottom. Here is some of the code I used to make the sidebar work. Any suggestions on how I can change this behavior.
$(window).scroll(function(){
sidebar_position();
});
$(window).resize(function(){
sidebar_position();
});
function sidebar_position(){
var w_width = ($(window).width() -1000) /2;
$('#sidebar').css('left', w_width);
var sidebar_height = $('#sidebar').outerHeight();
var content_height = $('#widecolumn').outerHeight();
var w_height = $(window).height();
if ( sidebar_height > w_height) {
$('#sidebar').css('position', 'absolute');
} else {
$('#sidebar').css('position', 'fixed');
};
if (sidebar_height > content_height) {
content_height = sidebar_height;
$('#widecolumn').css('min-height', content_height);
};
if($.browser.msie && $.browser.version == 6 ){
$(window).scroll(function(){
$('#sidebar').css({
top: $(window).scrollTop()
});
})
}
}
I am sort of lost of what to do next....and how to fix this
Hm small screens are a problem either way since the sidebar is almost 600 px high so on netbooks it probably won't fit in the browser window at all.
But you could leave the sidebar on position absolute until the sidebar reaches the top when scrolling and then switch to position fixed so it stays at the top of the screen.
That way it will use the available screen height