• 締切済み

jquery 追従メニュー IEについて

下記jqueryを使って追従メニューを制作した時に、IEで確認すると限りなくスクロールできてしまいます。 解決する方法を検索しましたがわかりませんでした。 どなたかお分かりの方教えてください。 よろしくお願いします。 <script type="text/javascript"> $(function() { var offset = $("#leftcontent2").offset(); var topPadding = 15; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $("#leftcontent2").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $("#leftcontent2").stop().animate({ marginTop: 0 }); } }); }); </script>

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

旧式のIE6で試してみましたが、再現しないようです。 ただし、#leftcontent2の高さがウィンドウの高さよりも高いと御質問のような事象が発生しますが、これは他のブラウザの場合も同様と思います。(スクリプトのコードがそのようになっていますので) HTMLやCSSの設定がどのようになっているのか不明ですが、試してみた時の条件は、#leftcontent2をbody直下におき、幅、高さは固定でposition:absoluteにしてしています。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • メインウィンドウサイズの高さを500ピクセル以下に制限する方法を教えてください。

    お世話になっております。 現在、スクロールメニューバーでコンテンツを作っていますが、 スクロールするメニューの高さよりウインドウの高さを小さくすると、 エクセルの様にスクロールバーが永遠と続きます。 苦肉の策として、ウインドウの高さをメニューバーの高さより小さく出来ないようにしようと考えましたが、方法がわかりません。 教えてください。 ちなみに、現状のjavascriptは下記のものを使用しています。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script> <script type="text/javascript"> $(function() { var offset = $("#sidebar").offset(); var topPadding = 15; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $("#sidebar").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $("#sidebar").stop().animate({ marginTop: 0 }); }; }); }); </script>

  • jqueryでscrollTopの値をとりたい

    貴重な場をお借りして、ぜひとも教えていただきたいことがございます。 今、スクロールをすると要素がフェイドインするようなjqueryを書いています。 下記をご覧ください。 $(window).on("scroll", function(){}の中に入っているscrollTop,scrollVolを このfunctionの外でも使用したいのですが、方法はございますでしょうか。 つまり、if文のscrollVolに値を入れたいのですがunderfindとなってしまいます。 $(window).on("scroll", function(){}の中でif文を実行すれば取得はもちろんできるのですが、この外側で使用したい場合どうすればよろしいでしょうか。 お手数ですが、お力を貸していただけませんでしょうか。 よろしくお願いいたします。 function paralax(){ var target = $('#sec1'); var targetOffset = target.offset().top; target.css('display','none'); var scrollTop , windowHeight , scrollVol; windowHeight = $(window).height(); $(window).on("scroll", function(){ scrollTop = $(window).scrollTop(); scrollVol = scrollTop + windowHeight; }); if(targetOffset <= scrollVol){ target.fadeTo(400 , 1); } }

  • jQuery|エレベーターメニューにおいて

    こんにちは、 画面スクロールに対して要素が後追いする、いわゆるエレベーターメニューにおいて、その要素がウィンドウ高よりも大きいと、ひたすらに画面下部を掘り進んでしまいます・・といってもわからないと思うので、お手数ですが、下記URLをご参照頂けますでしょうか。 http://www.geocities.jp/fumiefumifumi/menu.html ウィンドウ高を縮めた後、ページ下部までスクロールすると、わかって頂けると思います。cssにてメニュー(#navBox)にposition:absoluteをかけ、以下のスクリプトで動かしています。わからないなりにいろいろいじくってみたのですが、不具合を解決することができませんでした。 var name = "#navBox"; var menuYloc = null; $(function(){ menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px"))) $(window).scroll(function () { offset = menuYloc+$(document).scrollTop()+"px"; $(name).animate({top:offset},{duration:700,queue:false}); }); 右側メインのボックス下部とメニューボックスの下部が揃う状態、もしくはposition:fixedと同じ状態になるのが理想です。 不具合を解消する方法をご存じの方、いらっしゃいましたら、どうかよろしくお願いします。

  • jqueryについて教えて下さい。

    貴重な場をお借りして質問させていただきます。 知識のある方、お力を貸して下さい。 今勉強の為プラグインなどを制作しておりまして、 一定の値までスクロールするとコンテンツをフェイドインさせるような スクリプトを書いています。 ただ、別ページに遷移して戻ってくると、opacityが0となり真っ白な状態と なってしまいます。 それを解決するためにcookieなどを使ったりはして出来たのですが、 スマートではないので、cookieを使用せずに出来れば嬉しいのですが、 良い方法ございましたら、ご教示いただけないでしょうか。 宜しくお願い致します。 <script type="text/javascript"> $(function(){ $('#contents1').locationFade(); $('#contents2').locationFade(); $('#contents3').locationFade(); $('#contents4').locationFade(); }) </script> (function($) { $.fn.locationFade = function(options){ var defaults = { fadeSpeed:500, location:300, easing:'swing' } var opts = $.extend(defaults , options); var windowHeight = $(window).height(); var target = $(this); target.css('opacity',0);//最初に透明度0とする $(window).on('load' , function(){ //画像が読み込まれた後でないとtargetOffsetがきちんと取れない為 target.each(function(){ var targetOffset = target.offset().top; if(windowHeight > targetOffset){       //最初から要素がwindowサイズ内に表示されているなら即fadeIn target.stop().fadeTo(opts.fadeSpeed , 1 , opts.easing) } $(window).on("scroll", function(){ var scrollTop = $(window).scrollTop(); var scrollVol = scrollTop + windowHeight - opts.location; //locationはその要素のどれだけ上に来た時に表示するかの値 if(targetOffset <= scrollVol){ target.stop().fadeTo(opts.fadeSpeed , 1 , opts.easing) }; }); }); }); }; })(jQuery);

  • IEのみjqoueryスライダーが動かない

    いつもお世話になっています。 Wordpressでサイトを構築しています。 firefoxやsafariでは動作確認がとれいていますがieのみ動きません。 なぜでしょうか? <script src="/js/jquery-1.6.2.min.js"></script> <script src="/js/jquery.easing.1.3.js"></script> <script src="/js/jquery.bxslider.min.js"></script> <?php wp_head(); ?> <script type="text/javascript"> $(function(){ var slider = $('#slider8').bxSlider({ auto: true, pager: true, speed: 1000, controls: true, }); $('.thumbs a').click(function(){ var thumbIndex = $('.thumbs a').index(this); slider.goToSlide(thumbIndex); $('.thumbs a').removeClass('pager-active'); $(this).addClass('pager-active'); return false; }); $('.thumbs a:first').addClass('pager-active'); }); jQuery(function() { var topBtn = jQuery('.tothetopfixed'); //最初はボタンを隠す topBtn.hide(); //スクロールが100に達したらボタンを表示させる jQuery(window).scroll(function () { if (jQuery(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); //スクロールしてトップに戻る //500の数字を大きくするとスクロール速度が遅くなる topBtn.click(function () { jQuery('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> よろしくお願いします。

  • jQueryで困っています。教えてください。

    スムーススクロールを導入しようと、いろいろ調べて以下のものを参考にさせていただこうと考えています。どうゆう流れになっているのかを調べて分からないことがあったので投稿させていただきました。var target = jQuery(href == "#" || href == "" ? 'html' : href);この行の意味がわかりません。また、targetに何が代入されているのか分かりません。回答よろしくお願いします。 jQuery-------------------------------------------- //スムーズスクロール jQuery(function(){ // #で始まるアンカーをクリックした場合に処理 jQuery('a[href^=#]').click(function() { // スクロールの速度 var speed = 1000; // ミリ秒 // アンカーの値取得 var href= jQuery(this).attr("href"); // 移動先を取得 var target = jQuery(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール jQuery('body,html').animate({scrollTop:position}, speed); return false; }); });

  • 【jQuery】 if else 文の合体

    2カラムレイアウトで良くあるページをスクロールしていくと 「サイドナビの"途中"で固定され、フッター直前で固定解除」されるのを jQueryで実現したいんです。 「サイドナビの途中で固定(でもフッターに重なる)」と 「最初から固定されてるけどフッター手前で固定解除」という 2種類のjQueryを見つけたので、その2つを合体して 上記の希望する動作にしたいんです。 以下2つのコードです。 ■サイドナビの途中(class="kotei")で固定 $(function(){ var nav = $('.kotei'), offset = nav.offset(); $(window).scroll(function(){ if($(window).scrollTop() > offset.top) { nav.addClass('fix-on');} else {nav.removeClass('fix-on');}}); }); ※スタイルシート .fix-on { position : fixed; top : 0; z-index : 10000; } ■フッター(id="footer")手前で固定解除 window.onload=function(){ var onoff = $("#fotter").offset().top - $(window).height() + 0; //フッターまでの高さを計算=onoff $(window).scroll(function(){ if($(window).scrollTop() &lt; onoff) //onoffの高さがスクロール量より大きい場合 $(".kotei").addClass("fix-on");   //class="kotei"にfix-onを付与する else $(".kotei").removeClass("fix-on"); //それ以外はfix-onを解除 }); } ■自力で合体したけどうまく動作しなかったコード $(document).ready(function(){ var nav = $(".kotei"), offset = nav.offset(), onoff = $("#footer").offset().top - $(window).height() + 0; $(window).scroll(function(){ if($(window).scrollTop() > offset.top) { nav.addClass("fix-on");} else if($(window).scrollTop() > onoff) { nav.removeClass("fix-on");} else {nav.removeClass("fix-on");}}); }); オフセットを2重に設定したのが競合しているのでしょうか。。? ※※※補足※※※現在のホームページレイアウト(html) <body> <#wrap> <#content> 略 </#content> </#wrap> <#header> 略 </#header> <#side-nav> <li>略</li> </#side-nav> <#footer> </body> 普通の2カラムと違うところは<#header>をposition:absoluteでトップに絶対配置している事、 <#content>と<#side-nav>は<#header>分のマージンを上部に取っている事、 <#wrap>は<#content>のみを囲っている事です。 ■ヘッダー■←:absoluteでトップに □□■■■■ □□■コン■ ナビ■テン■←maegin-top+コンテンツだけにwrap □□■ツ■■ □□■■■■ ■フッター■ 2つの条件を両方満たしたjQueryを見つけたんですが、 <wrap>で<side-menu>と<content>の両方を包んでいないと 既存のjQueryでは動作しないようです。 それで2つのjQuertを合体したいという経緯に至りました。

  • jqueryの$()について

    貴重な場を借りて質問させていただきます。下記のコードはページ内リンクをさせるコードなのですが、※他のサイトからコピペしてます。 2点ほどお聞きしたいことがあります。 一点目はfunction()の()内に$をいれているのはなぜでしょうか。私が書く際にはつけたことがなくて気になりました。 二点目は、targetという変数を作りったのにも関わらず、それをまた$()内 にいれ、$(target)としている理由がわからず、おしえていただけませんでしょうか。 jQuery(document).ready(function($) { $('a[href^=#]').click(function() { if ($(this).hasClass('scroller')) { var target = $(this).attr('href'); if (target != '#') { target = $(target).offset().top; $('html,body').animate({ scrollTop:target },1500,'quart'); } else { $('html,body').animate({ scrollTop:0 },1500,'quart');

  • 時間差で要素が出てくるエフェクトを導入

    http://ziyudom.com/js-delay/を参考に時間差で要素が出てくるエフェクトを導入したかったのですが、うまくいきません。 いっぺんに時間差なく行われてしまいます。 一つ終わって次という形にしたいです。 ないしはほんの少し差をつけたいです。 スクロールがカキはできないのですかね。うまく再現できていませんがソースはわかると思います。スクロールの仕方があれば教えてください。 http://codepen.io/anon/pen/WGqjZZ ・css .js-translate3d-lower-right,.js-translate3d-lower-right-2,.js-translate3d-lower-right-3 { opacity : 0;/* 対象の要素の初期の不透明度 */ transform: translate3d(-1rem,-2rem,-1rem); /*transform : translate(5rem, 0);横からスライド*/ transition : all 500ms; } ・動くがいっぺんに動いてしまう。 var $deferredAnim = $.Deferred( function( deferredAnim ){ //thenでファンクション名を繋げる deferredAnim.then(anim_01) .then(anim_02) .then(anim_03) }); //実行 $deferredAnim.resolve(); function anim_01 (){ $(function(){ $(window).scroll(function (){ $('.js-translate3d-lower-right').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); }); } function anim_02 (){ $(function(){ $(window).scroll(function (){ $('.js-translate3d-lower-right-2').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); }); } function anim_03 (){ $(function(){ $(window).scroll(function (){ $('.js-translate3d-lower-right-3').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); }); } ・こちらだと動かない最後の}にエラーと出る $(function(){ $(window).scroll(function (){ $('.js-translate3d-lower-right').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); } function anim_02 (){ $(window).scroll(function (){ $('.js-translate3d-lower-right').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); } function anim_03 (){ $(window).scroll(function (){ $('.js-translate3d-lower-right').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); }

  • 現在jQueryで背景色が変るナビを作っていて…

    現在jQueryで背景色が変更するナビゲーションを作っていますが、他のブラウザでは反応するのに、firefoxでは反応しません。 トップページからとあるページの特定部分へのリンクの場合です。 スクロールすると背景が追従してくるので問題ないのですが、スクロールせずクリックしただけの場合無反応です。 おそらくjQueryがスクロールになっているからだと思うのですが、 どう書き換えたらいいのかが分かりません。 クリックしてそのページにジャンプした場合に反応するjQueryにするには、 どう書き換えたらいいのでしょうか? 急ぎご回答願います。 // JavaScript Document $(window).load(function() { var set = 300;//ウインドウ上部からどれぐらいの位置で変化させるか var boxTop = new Array; var current = -1; //各要素の位置 $('.box').each(function(i) { boxTop[i] = $(this).offset().top; }); //最初の要素にclass="on"をつける changeBox(0); //スクロールした時の処理 $(window).scroll(function(){ scrollPosition = $(window).scrollTop(); for (var i = boxTop.length - 1 ; i >= 0; i--) { if ($(window).scrollTop() > boxTop[i] - set) { changeBox(i); break; } }; }); //ナビの処理 function changeBox(secNum) { if (secNum != current) { current = secNum; secNum2 = secNum + 1;//HTML順序用 $('#nav li').removeClass('on'); $('#nav li:nth-child(' + secNum2 +')').addClass('on'); /* 位置によって個別に処理をしたい場合 if (current == 0) { // 現在地がsection1の場合の処理 } else if (current == 1) { // 現在地がsection2の場合の処理 } else if (current == 2) { // 現在地がsection3の場合の処理 }*/ } }; });