実現させたいことは、.cssのpositionがrelativeからfixedに変わるときの変化する時間を制御したいです。
css3のtransitionは効きませんでしたので、.animateで制御するのがよろしいでしょうか。
例1
$(window).on('scroll',function(){ var footerHeight = parseInt($('.site-footer').css('height')); var scrollHeight = $(document).height() - footerHeight; var scrollPosition = $(window).height() + $(window).scrollTop(); if ((scrollHeight - scrollPosition) / scrollHeight <= 0) { $('.office').css('position','relative'); } else { $('.office').css('position','fixed');
例2
//site-header fixed $(function() { var nav = $('.site-header'); //表示位置 var navTop = nav.offset().top+152; //ナビゲーションの高さ(シャドウの分だけ足してます) var navHeight = nav.height(); var showFlag = false; nav.css('top'); //ナビゲーションの位置まできたら表示 $(window).scroll(function () { var winTop = $(this).scrollTop(); if (winTop >= navTop) { if (showFlag == false) { showFlag = true; nav .addClass('fixed') .stop().animate({'top' : '0px'}, 'fast'); } } else if (winTop <= navTop) { if (showFlag) { showFlag = false; nav.stop().animate({'top' : -navHeight+'px'}, 'fast', function(){ nav.removeClass('fixed'); }); } } }); });
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/07/07 03:33