- This topic is empty.
-
AuthorPosts
-
January 9, 2018 at 7:35 am #265191civesParticipant
Hi all – unfortunately I am a bit tied down to this script: https://codyhouse.co/gem/full-screen-pop-out-navigation/ for my site’s navigation. I’m pretty far in the development process to restructure the navigation. It works fine, however I can’t get it to function properly in IE.
The point of the script is to only reveal nav when the user scrolls up, when in IE, it shows briefly, then hides instantly.
My initial thought is it has something to do with this CSS:
.cd-header.is-visible {
/* if the user changes the scrolling direction, we show the header */
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
-o-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
z-index:1000;
}I suppose this could also be a JS issue?
Thoughts? Here is a link to the site I am developing: http://697792-hs-sites-com.sandbox.hs-sites.com/home
Thanks!
January 9, 2018 at 2:22 pm #265198ShikkedielParticipantI’m on a Windows 7 machine with IE11 and that seems to work fine…
January 9, 2018 at 2:30 pm #265199civesParticipantIm running IE11 as well, the nav bar remains visible for you on scroll up? For me it instantly hides itself. On scroll up, it is supposed to reveal, and then remain visible. If you compare with chrome or safari you could get a better sense of how it should function.
January 9, 2018 at 3:17 pm #265200ShikkedielParticipantYes, it stays visible when scrolling up. I’m quite familiar with this kind of sticky header script and functionality. Don’t know what would be different in your setup.
January 9, 2018 at 5:12 pm #265202civesParticipantOk – I’ve narrowed the cause of the problem down to Windows 10, with IE11. Any ideas why windows 10 would be the route of the problem?
January 9, 2018 at 5:28 pm #265203ShikkedielParticipantI couldn’t say without testing, IE has always had annoying scrolling quirks. I’d recommend logging
currentTop
andpreviousTop
to the console to see what is actually happening to the values and go from there (I would check myself but don’t have W10 running on anything)…January 9, 2018 at 10:17 pm #265217ShikkedielParticipantMaking a wild guess though, I’d think it double fires at the end.
Edited – proposed code would also get triggered when not going up…
January 9, 2018 at 10:36 pm #265218ShikkedielParticipantTheorecially, this should solve that (provided my brain got wired correctly this time):
if (currentTop < this.previousTop ) { } else if (currentTop != this.previousTop) { }
January 10, 2018 at 6:57 am #265228civesParticipantShikkediel – Thanks for working through this with me. I don’t doubt that you have a solution there, though I’m not sure I am up-to-speed enough with JS to know where to implement your solution.
Would you mind sharing where in the JS to insert that?
jQuery(document).ready(function($) {
//if you change this breakpoint in the style.css file (or _layout.scss if you use SASS), don’t forget to update this value as well
var MQL = 300;
//primary navigation slide-in effect
if ($(window).width() > MQL) {
var headerHeight = $(‘.cd-header’).height();
$(window).on(‘scroll’, {
previousTop: 0
}, function() {
var currentTop = $(window).scrollTop();
//check if user is scrolling upif (currentTop 0 && $(‘.cd-header’).hasClass(‘is-fixed’)) {
$(‘.cd-header’).addClass(‘is-visible’);
} else {
$(‘.cd-header’).removeClass(‘is-visible is-fixed’);
}
} else {
//if scrolling down…
$(‘.cd-header’).removeClass(‘is-visible’);
if (currentTop > headerHeight && !$(‘.cd-header’).hasClass(‘is-fixed’)) $(‘.cd-header’).addClass(‘is-fixed’);
}this.previousTop = currentTop;
});
}
//open/close primary navigation
$(‘.cd-primary-nav-trigger’).on(‘click’, function() {
$(‘.cd-menu-icon’).toggleClass(‘is-clicked’);
$(‘.cd-header’).toggleClass(‘menu-is-open’);
//in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
if ($(‘.cd-primary-nav’).hasClass(‘is-visible’)) {
$(‘.cd-primary-nav’).removeClass(‘is-visible’).one(‘webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend’, function() {
$(‘body’).removeClass(‘overflow-hidden’);
});
} else {
$(‘.cd-primary-nav’).addClass(‘is-visible’).one(‘webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend’, function() {
$(‘body’).addClass(‘overflow-hidden’);
});
}
});
});January 10, 2018 at 7:57 am #265232ShikkedielParticipantLet me make a variation while I’m at it (middle block of what you’ve posted):
if ($(window).width() > MQL) { var headerHeight = $(".cd-header").height(); $(window).on( "scroll", { previousTop: 0 }, function() { var currentTop = $(window).scrollTop(); //leave the function if there is no change if (currentTop == this.previousTop) return; //check if user is scrolling up else if (currentTop < this.previousTop) { //if scrolling up... if (currentTop > 0 && $(".cd-header").hasClass("is-fixed")) { $(".cd-header").addClass("is-visible"); } else { $(".cd-header").removeClass("is-visible is-fixed"); } } else { //if scrolling down... $(".cd-header").removeClass("is-visible"); if (currentTop > headerHeight && !$(".cd-header").hasClass("is-fixed")) $(".cd-header").addClass("is-fixed"); } this.previousTop = currentTop; } ); }
I’ve added a line after “//leave the function if there is no change”… no need to go through the rest if the scrolling position is the same. You’re code snippet doesn’t look right by the way, I’m assuming it’s because of a copy and paste.
January 10, 2018 at 8:07 am #265233civesParticipantShikkediel, I can’t thank you enough! Spent a lot of time on this and that seemed to have worked.
Cheers!
January 10, 2018 at 9:36 am #265234ShikkedielParticipantExcellent. :-)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.