- ベストアンサー
jQueryエレベーターメニューの不具合解消方法
- jQueryを使用したエレベーターメニューで要素が画面下部を掘り進んでしまう不具合が発生しています。
- cssのposition:absoluteと以下のスクリプトを使用しているが、問題が解決されていない。
- 右側メインのボックス下部とメニューボックスの下部が揃う状態、もしくはposition:fixedと同じ状態になる解消方法を知りたい。
- salt_on_all
- お礼率56% (9/16)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- 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>
- 締切済み
- JavaScript
- 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); } }
- ベストアンサー
- JavaScript
- 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; }); });
- ベストアンサー
- JavaScript
- IEのみスクロールイベントで要素がちらつきます
スクロールイベントで要素を追尾する処理をJavaScriptで記述しました。 他のブラウザでは綺麗に追尾してくれているのですが IE(ver9)だけ要素がちらつきながら追尾します。 スムーズにしたいのですが以下のソースのどこがいけないのでしょうか？ 解決方法を教えて下さい。 [HTML] <a id="pageTopButton" href="#">ページ上部へ</a> [CSS] #pageTopButton { width: 100px; position: relative; } [JavaScript(jQuery)] /////初期設定 var viewWindowBottom = $(window).scrollTop() + $(window).height(); $("#pageTopButton").css("top", (viewWindowBottom - ($("#pageTopButton").height())) + "px"); ////画面をスクロール時のイベント $(window).scroll(function(){ var viewWindowBottom = $(window).scrollTop() + $(window).height(); $("#pageTopButton").css("top", (viewWindowBottom - ($("#pageTopButton").height())) + "px"); });
- 締切済み
- JavaScript
- 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);
- ベストアンサー
- JavaScript
- cssのtranslateYを変えたい
知識のある方、教えていただきたいです。 やりたいことは、jqueryでtranslateYにscrollTop - offsetTopを代入するということです。何が間違っているのでしょうか。 $('#tableLayout table thead').css('transform', 'translateY(' + scrollTop - offsetTop + 'px)'); headerFix(); function headerFix(){ var $header = $('#tableLayout thead'), offsetTop = $header.offset().top, windowHeight = $(window).height(); $(window).on('load scroll orientationchange resize' , function(){ var scrollTop = $(window).scrollTop(); if (scrollTop >= offsetTop){ $('#tableLayout table thead').css('transform', 'translateY(' + scrollTop - offsetTop + 'px)'); }else{ }; }); }
- ベストアンサー
- JavaScript
- jquery？css？IEで表示されません。
現在HPを作成していて、ページ内リンクに、jQueryを入れてカレントページにナビゲーションを固定するようにしています。バックに白背景がカレントページのページ内リンクにしています。クロームで確認しても動くのにIEではバックが白にならず困っています。 jQueryとcss、どちらに原因があるのかすら分かりません。 ご回答いただけると幸いです。 jQuery // JavaScript Document $(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の場合の処理 }*/ } }; }); css div#nav ul li.on { box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 3px 7px rgba(0, 0, 0, 0.3),0 -3px 2px rgba(0, 0, 0, 0.25) inset; cursor:pointer; background-color:#FFF; color:#ffffff; }
- ベストアンサー
- CSS
- position:fixed;でメニューを右側に固定したい
position:fixed;でメニューを右側に固定したい こちらを参考にサイドバーが固定された2カラムのサイトを作っています。 http://www.css-lecture.com/log/css/049.html 上記のサイトを見てくだされば分かると思うのですが、サイトバーはすべてを囲うwrapperボックスの左端に固定されています。 これをwrapperボックスの右端に持って行きたいのですが、うまくいきません。 position:fixed;にrightやleftを指定すると、wrapperボックスではなくブラウザの端に寄ってしまいます。 absolutoではスクロールされてしまいますし……。 自分なりに調べていろいろと試してみたのですが、解決することはできませんでした。 javascriptや疑似フレームは出来るだけ使いたくありません。 右端に持って行くことは可能なのでしょうか？現状では無理なのでしょうか？ HTML <div id="wrapper"> <div id="menu"></div> <div id="main"></div> </div> CSS #wrapper{ width:700px; margin:0 auto; background-color:#FFF; position:relative; } div#menu { width: 100px; background: #CCC; padding:10px; height:100%; position:fixed; top: 0px; z-index: 20; } * html div#subContents { position: absolute; top: expression(eval(document.documentElement.scrollTop+0)); } #main{ margin-left:120px; padding:10px; width:560px; position:relative; background-color:#FFF; } よろしくお願いします。
- ベストアンサー
- HTML
- jquery eachがうまく設定できません。
$('.group').each(function(i){ var targetOn = $('.box-' + i); $(window).scroll(function(){ var targetOnPosition = $(targetOn).offset().top - $(window).height(); ; if ($(window).scrollTop() > targetOnPosition + 10) { $('.box-' + i).fadeIn(1000); } else { $('.box-' + i).hide() } }); }); 上記の$('.box-' + i)で.box-1、.box-2、.box-3それぞれが表示位置に来たときにフェードインするように、それ以外のときは消すようにしたいのですがうまくいきません。 $('.box-' + i)の部分を$('.box-1')などにするとうまくいきます。 記述の問題だと思うのですが、行き詰まったので質問させてください。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- メインウィンドウサイズの高さを500ピクセル以下に制限する方法を教えてください。
お世話になっております。 現在、スクロールメニューバーでコンテンツを作っていますが、 スクロールするメニューの高さよりウインドウの高さを小さくすると、 エクセルの様にスクロールバーが永遠と続きます。 苦肉の策として、ウインドウの高さをメニューバーの高さより小さく出来ないようにしようと考えましたが、方法がわかりません。 教えてください。 ちなみに、現状のjavascripｔは下記のものを使用しています。 <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>
- 締切済み
- JavaScript
お礼
ご回答ありがとうございます。 おかげさまで解決することができました、ありがとうございます！