jQueryのScroolFollowで高さを制御
- Webデザインをやっているeriponです。javascriptについてご質問させてください。
- jquery.scrollfollow.jsを使ってスクロールを追うメニューを作成しています。メニューの縦幅が高く、Browser sizeが小さい場合、下のボタンが押せなくなります。
- Browersizeがメニューより狭い場合は、メニューを追わない方法があるかどうか教えてください。
- ベストアンサー
jQueryのScroolFollowで高さを制御
はじめまして。Webデザインをやっているeriponです。javascriptについてご質問させてください。 現在こちらのサイトを参考に、jQueryのjquery.scrollfollow.jsを使ってスクロールを追うメニューを作っています。http://html-coding.co.jp/knowhow/tips/000021/ 動きは問題なく再現出来たのですが、私が作ったメニューの縦幅が高く、Browser sizeが小さい場合、下の方のボタンが押せなくなってしまいます(^^;) そこで、Browersizeがこのメニューより狭い場合はメニューを追わないという方法がないかと思ったのですが、調べても見つからず困っております。どなたかお知恵を貸してはいただけませんか？宜しくお願い致します。
- eripon71
- お礼率100% (4/4)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
//jquery.scrollfollow.js 95行目あたり if ($(window).height() > box.height() + 100) { box.animate( { top: aniTop }, options.speed, options.easing ); } animateメソッドを条件下に置いてやればよさそうです。 条件式は適時調節。
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
scrollfollow.jsは機能の停止再開の機能を持ってるみたいです。 http://kitchen.net-perspective.com/open-source/scroll-follow/ の4.のサンプル そこで、#Menuの中に <a id="startstop">追随</a> を作っておき、 $( document ).ready( function (){ $( '#example2' ).scrollFollow({ speed: 1000, offset: 60, killSwitch: 'startstop', onText: '追随中止', offText: '追随再開' }); sizecheck(); $(window).resize(sizecheck); function sizecheck(){ if($(window).height() < $("#Menu").height()) $("#startstop").click(); } }); とする。
お礼
さっそくご回答ありがとうございます! 既にデザイン段階でOKを頂いているので、 追加でスイッチを入れるのは考えていなかったのですが、提案の一つにしてみます。
関連するQ&A
- 複数のjQueryを導入するには…？
見てくださってありがとうございます。 サイトにスムーススクロールとフォトギャラリーのjQueryを入れたのですが片方が動きません。 ------------------------- <!-- スムーススクロール↓ --> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/test.js"></script> <!-- フォトギャラリー↓ --> <link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> ------------------------- コードは上記のように記述してありあます。 スクロールはhttp://klutche.org/archives/536/様のを使用、、 フォトギャラリーはhttp://myisland.jp/様のフォトギャラリーSample#2を使用しています。 片方消すと正常に動くのでコードは間違っていないと思いますが なぜjsフォルダに一個一個入れて呼び出しているのに動かないのかわかりません。 head内にバージョン違いのjQuery本体を呼び出すと動かなくなるのは知っていますが この場合本体は一個しか呼び出していないですよね・・・？ プログラムさっぱりでとても困っています。 解決策よろしくお願いします。
- 締切済み
- JavaScript
- jQueryについて教えてください
jQueryというJSがあるのは誰もがご存知だと思います。 私も名前や少しだけ使ったことがありますが、いまいち漠然として分かりません。 初歩的な質問で申し訳ないのですが、 極論から言うとjQueryでいったいどの位の表現？機能を使うことができるのですか？ 本も買ってみたり、ネットでも調べると何かしらjQueryを使ったプログラムはありますが、それが全てではないと思いますし、むしろ極一部だと思います。 jQueryを使うと、どんな事を、どうやったら、何ができる？ って事がどうして皆さん分かるのでしょうか？ 例えば何かイメージしてる動きがあって、それはネットで調べれば近い情報は出てくると思います。 しかし、jQueryである必要も無ければ、jQueryの方が楽な場合もあると思います。 だけどjQueryだとなぜ楽に作れるのか、それが理解できなくて困っています。 JavaScriptの知識はかじる程度しかないですが、 jQueryを理解するにはjQueryのソースを理解しないと、何ができるかは判断できないのでしょうか？ また、「jQueryでできることの一覧」みたいなサイトってありますか？ あと、jQueryで使えるライブラリの意味がいまいち分かりませんが、 これはjQueryを理解してる人が、使いやすいように作った別のJSファイルって認識で良いのでしょうか？ どうも根本的な事を理解しきれてなくて、教えていただきたく。
- ベストアンサー
- JavaScript
- JQueryはもう古いのですか？
Webデザインの勉強をしていて、HTML5とCSS3をようやく覚えてきたのでJQueryを習おうかと思ったのですが、周囲からは「これからの時代はVue.jsだ」と言われました。そもそもJavaScript自体おろそかなのにこんな事を質問するのもおかしな話ですが、実際のところ、現場ではJQueryからVueへの移行が顕著なのでしょうか？今更JQueryを勉強するのは得策ではないのでしょうか？ 分かりやすい回答をお待ちしております。どうぞ宜しくお願い致します。 OS Windows10
- ベストアンサー
- デザイナー・クリエイティブ職
- jQueryについて質問です。
jQueryについて質問です。 複数のプラグインを一つのページに組み込み同時に使いたいのですが、 それぞれが干渉しているのかどれか一つしか使えません。 http://solidstate.jp/Navigation/treeMenu/script_54.html http://solidstate.jp/ContentsDisplay/accordion/script_130.html http://solidstate.jp/Navigation/houseOfCake/script_172.html こちらに紹介されている記事を参考に <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.navigmenu.js"></script> <script type="text/javascript"> $(function(){ $('#menu').navigmenu(); }); </script> <script type="text/javascript" src="accordian.pack.js"></script> <script type="text/javascript"> window.onload = function() { new Accordian('basic-accordian',5,'header_highlight'); } </script> <script src="lib/jquery.js" type="text/javascript"></script> <script src="lib/jquery.cookie.js" type="text/javascript"></script> <script src="jquery.treeview.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#filetree").treeview({//ターゲットとなる要素に付加するID animated: "fast", //アニメーション設定（削除するとアニメ無し） collapsed: true, //開閉設定（削除するとロード時にメニューを全開） unique: true, //動作設定（削除すると自動的に閉じなくなる） persist: "cookie", //Cookie }); }); </script> このような記述を行いました。 ですが、動くのはひとつだけです。 これらを同時に動かすにはどうすればよいでしょうか？ 優先順位は上からです。
- ベストアンサー
- JavaScript
- jqueryを２つ設置した事で片方が動かなくなる
お世話になります かなり困っていますのでわかる方いらっしゃれば宜しくお願い致します 現在サイト内にjqueryを２つ設置しました ・一つは左グローバルメニューに伸縮するタイプのメニュー ・もう一つは画像をクリックするとポップアップの様になるスライドショー 少し自分で調べてみた所<script type=～></script> の書く順序によって片方が効いたり効かなかったりという所まではわかりました しかし、順序を変えても２つが共存する所まで行けません そもそも順序だけでは無いのでしょうか？ 以下を見てわかる方いらっしゃれば 是非お意見頂ければと思います 宜しくお願い致します 以下<head>内タグになります 今の状況だと左伸縮メニューは機能せず ポップアップスライドショーが機能しています <head> <!--左側伸縮メニュー--> <script type="text/javascript" src="./js/mootools-core.js"></script> <script type="text/javascript" src="./js/byslidemenu.js"></script> <script type="text/javascript"> window.onload = function(){ new BySlideMenu('verticalmenu', {vertical: true}); } </script> <!--//左側伸縮メニュー--> <!--ポップアップスライドショー--> <script type="text/javascript" src="./js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="./js/jquery.fancybox-1.2.1.pack.js"></script> <script type="text/javascript"> $(function() { $('a.large').fancybox(); }); </script> <!--//ポップアップスライドショー--> </head> かなり困っています 是非お力添えの程よろしくお願い致します
- 締切済み
- JavaScript
- javascript 動作がうまくいかない
javascriptは、ほぼわかりません。 参考url http://histerian.net/pallax/ パララックス サイトを構築しておりました。 メニューを押してスクロール移動すると、上部のmenuがアクティブ状態になります。 しかし、下にスクロールしてからメニューを押して、上に移動すると、menuが2つ、アクティブ状態になってしまいます。 ただ、1px上にずらすだけで低いコンテンツのメニューのアクティブが消え、本来のコンテンツのmenuがアクティブになります。 下へスクロールしてから、メニューを押して上に戻ったときに、該当のmenuのみ、アクティブ状態になるようにしたいです。 使用している元は cool-kitten というサンプルです。 url https://www.jqueryscript.net/demo/jQuery-Responsive-Parallax-Scroll... 使用しているjQueryは以下になります。 jquery.easing.1.3.js jquery.stellar.min.js waypoints.min.js 動作を制御しているjavascriptファイルは以下になります。 scripts.js どなたかご教示していただけないでしょうか よろしくお願い致します
- ベストアンサー
- JavaScript
- jQueryのタブにスクロールバーをつけたい
jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。 さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身１(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか？？
- ベストアンサー
- JavaScript
- jQueryで質問です。
jQueryで質問です。 オブジェクトA、Bがあるとします。 Aをドラッグすると、mousedownかdragstartの段階で要素がBに置き換わってドラッグさせるような動きは可能でしょうか。 作成中のソースを記載します。 <html> <head> <title>test</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./ui/jquery.ui.core.js"></script> <script type="text/javascript" src="./ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="./ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="./ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="./ui/jquery.ui.droppable.js"></script> <script type="text/javascript"> $(function(){ obj1 = $("#box"); obj2 = $('<div style="width:200px;height:200px;background:red;">B</div>'); obj1 .mousedown( function(){ obj1.replaceWith(obj2); obj2.draggable(); } ); }); </script> </head> <body> <div style="width:200px; height:100px; background: #cccccc;" id="box">A</div> </body> </html> これだと、Aのドラッグを一度解除して、Bをドラッグすると上手くいきますが、1回のモーションでBをドラッグさせたいのです。 宜しくお願いします。
- ベストアンサー
- JavaScript
- jQuery.jsを使ったhtml外部読み込み
教えてください。 現在Jqueryを使用して外部htmlを読み込ませようとしていますが、 うまくいきません・・・ ■本体html <head> <script src="js/jquery-1.8.3.min.js"></script> </head> <body> <script type="text/javascript" src="sample.js"></scrip> <div id="sample"></div> </body> ■sample.js // JavaScript Document $(function(){ $("#sample").load("sample.html"); }); ■読み込ませるsample.html 特に設定なし このような感じですが、全然読み込めません。。。 javascriptを外部リンクにしているのは、読み込むhtmlが複数ある為、 headの見栄えが悪くなるからという個人的な意見です・・・ 済みませんがお知恵をお貸しください！！
- 締切済み
- JavaScript
- JavascriptとJqueryを混在し記述
JavascriptとJqueryが混在したスクリプトファイル（.js)の書き方について質問です。 Jquery自体がjavascriptで書かれており結局はjavascriptであるということは理解していますが 気になるので質問させてください。 通常、javascriptの書き方として、スクリプトやその関数定義を１つのjsファイルに書くと思いますが、 Jqueryが混在しても考えは一緒で、ただ、ページが全て読み込まれた後（要素を特定できるようにするため）に実行したい場合の スクリプトを $(function(){ //Jquryや通常のjavascript }); の中にこのように書けばいいって話ですよね？ つまり1つのjsファイル内に以下のようにスクリプトを混在させた書き方でもいいのですよね？ ===== script.js ====== //(1)Javaスクリプト ←jsファイルが読み込まれたら実行するスクリプト //関数定義 function test(){ //Javaスクリプト } //(2)Jquery ←ページが全て読み込まれた後で実行するスクリプト $(function(){ //Jqueryスクリプト //Javaスクリプト }); 初歩的なことかもしれませんがすいません。
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます! こちら試してみたところ、まさに私のやりたい動作になってくれました! 大変助かりました。有難うございました!