PierBover
Fix breaks smooth scrolling and onload CSS animations
I'm using the following js for smooth scrolling:
// Select all links with hashes $('a[href*="#"]') // Remove links that don't actually link to anything .not('[href="#"]') .not('[href="#0"]') .click(function(event) { // On-page links if ( location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname ) { // Figure out element to scroll to var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); // Does a scroll target exist? if (target.length) { // Only prevent default if animation is actually gonna happen event.preventDefault(); $('html, body').animate({ scrollTop: target.offset().top }, 1000, function() { // Callback after animation // Must change focus! var $target = $(target); $target.focus(); if ($target.is(":focus")) { // Checking if the target was focused return false; } else { $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable $target.focus(); // Set focus again }; }); } } });
and the following js for onload CSS animations:
// Plugin @RokoCB :: Return the visible amount of px
// of any element currently in viewport.
// stackoverflow.com/questions/24768795/
;(function($, win) {
$.fn.inViewport = function(cb) {
return this.each(function(i,el){
function visPx(){
var H = $(this).height(),
r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));
} visPx();
$(win).on("resize scroll", visPx);
});
};
}(jQuery, window));
$(".animate").inViewport(function(px){ $(this).toggleClass("triggeredCSS3", !!px ); });
Both these functionalities break with this fix. Any ideas? Many thanks.
Not sure what you want to accomplish here.
Do you have a repo or codepen that reproduces this?
On iOS, see the difference between: http://luiszayas.com/clients/hf/with-wrap/ http://luiszayas.com/clients/hf/without-wrap/
When you click on 'Get Started' it should scroll smoothly to the next section and when you scroll down to the image it should fade in.