スクロールに合わせて、divで囲んでいる部品も一緒に移動させたい。
可能ならサンプルをご提示してほしいです。
フレームワークで使用可能なものとしては、Bootstrap v2.3、jQuery v1.8になります。
<div id="main"> <div id="left_content"> </div> <div id="right_content"> スクロールに合わせてここが移動 </div> </div> <script> $(function(){ // ここで何か }); </script>
以下補足します。
right_contentにはログインフォームが入ります。
left_contentがサイトの説明になり、heightがとても長いです。
そのため下にスクロールする際に、ログインフォームが移動できればと考えております。
また、
「あるところまでスクロールされたら固定」にできたらと思います。
scroll開始位置と終了位置では、違和感ないように固定したいです。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答4件
0
仕組みとしてはhttp://www.html5-memo.com/jquery-tips/jquery07/と同じ理屈でできるんじゃないですかね?
投稿2015/12/14 07:06
編集2015/12/14 07:07総合スコア3763
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
「あるところまでスクロールされたら固定」であればこんな感じでしょうか。
ただ、フッターにかなり高さのあるデザインだと、下記のコードだと固定されたまま食い込んでしまうので調整が必要です。
Javascript
1function rightcontentMoving(){ 2 var scrollTop = $(window).scrollTop(); 3 if(scrollTop > fixedStartPoint - fixedTop){ 4 $("#right_content").css({"position":"fixed", "top":fixedTop + "px"}); 5 }else if(scrollTop < fixedStartPoint - fixedTop){ 6 $("#right_content").css({"position":"static", "top":0}); 7 } 8} 9 10var fixedStartPoint = //ここに#mainより上のコンテンツのheightを指定(margin-bottomなどが指定されている場合それも含める) 11var fixedTop = 20 //固定したときのtop値 12$(window).on("load scroll resize", rightcontentMoving);
投稿2015/12/14 07:03
総合スコア992
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
投稿2015/12/14 06:17
退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
一緒にスクロールとは、画面のどこかに固定し、表示させ続けるという認識で良いですか?
昔このサイトを参考に(ほぼコピペ)作ったものですが。
以下を追加し、「// ここで何か」のところでstartFix()を呼び出せば、動きます。
JavaScript
1var fixMy = 0; 2var fixMx = 0; 3var firstFlag = true; 4function startFix(){ 5// 場所を固定したいものをここで指定する 6// fixedLAYER(固定したい要素のid , 固定する場所 , x座標 , y座標) 7// 固定する場所 8// →rightTop:右上 rightBottom:右下 leftTop:左上 leftBottom:左下 9// x(y)座標 両方0にするとはみ出るので座標をずらします。 10// 固定する場所が起点で、座標を決める 11 12//例:fixedLAYER('fixedLay0','rightTop',-350,20); 13fixedLAYER(固定したい要素のid , 固定する場所 , x座標 , y座標); 14} 15 16function fixedLAYER(layName,posString,offSetX,offSetY){ 17if(!window.fixedLAYER[layName]){ 18//--ブラウザ判定 19this.ie = !!document.all 20this.n4 = !!document.layers 21this.w3c = !!document.getElementById 22this.ua = navigator.userAgent 23this.mac45 = ua.indexOf('MSIE 4.5; Mac_PowerPC') != -1 24this.mac5 = ua.indexOf('MSIE5.0;Mac_PowerPC') != -1 25this.macie = ua.indexOf('Mac_PowerPC') !=-1 && ie 26this.moz = ua.indexOf('Gecko') !=-1 27this.opr = !!window.opera 28if(this.ie&&!(this.mac45)){ 29window.onscroll = window.onresize = startFix 30} 31 32if(this.n4) 33window.onresize = function(){ location.reload() } 34window.fixedLAYER[layName] = true 35} 36 37offSetX = parseInt(offSetX,10) 38offSetY = parseInt(offSetY,10) 39 40if( posString == 'rightTop' ){ 41 42if(this.ie&&!this.opr) 43offLeft = document.body.clientWidth + offSetX 44else offLeft = window.innerWidth + offSetX 45if(this.ie&&!this.opr) 46offTop = offSetY 47else offTop = offSetY 48 49} else if( posString == 'rightBottom' ){ 50 51if(this.ie&&!this.opr) 52offLeft = document.body.clientWidth + offSetX 53else offLeft = window.innerWidth + offSetX 54if(this.ie&&!this.opr) 55offTop = document.body.clientHeight + offSetY 56else offTop = window.innerHeight + offSetY 57 58} else if( posString == 'leftBottom' ){ 59 60if(this.ie&&!this.opr) 61offLeft = offSetX 62else offLeft = offSetX 63if(this.ie&&!this.opr) 64offTop = document.body.clientHeight + offSetY 65else offTop = window.innerHeight + offSetY 66 67} else if( posString == 'center' ){ 68 69if(this.ie&&!this.opr) 70offLeft = document.body.clientWidth/2 + offSetX 71else offLeft = window.innerWidth/2 + offSetX 72if(this.ie&&!this.opr) 73offTop = document.body.clientHeight/2+ offSetY 74else offTop = window.innerHeight/2 + offSetY 75 76} else { 77 78if(this.ie&&!this.opr) 79offLeft = offSetX 80else offLeft = offSetX 81if(this.ie&&!this.opr) 82offTop = offSetY 83else offTop = offSetY 84 85} 86 87offLeft = parseInt(offLeft,10) 88offTop = parseInt(offTop,10) 89 90if(document.all&&!this.opr){ 91var mx = document.body.scrollLeft + offLeft 92var my = document.body.scrollTop + offTop 93} else { 94var mx = self.pageXOffset + offLeft 95var my = self.pageYOffset + offTop 96} 97if(this.ua.toLowerCase().indexOf('chrome') != -1){ 98 if(!firstFlag){ 99 mx = mx + "px"; 100 my = fixMy; 101 }else{ 102 mx = mx + "px"; 103 my = my + "px"; 104 } 105} 106if(document.getElementById){ //e5,e6,n6,n7,m1,o6,o7,s1用 107document.getElementById(layName).style.left = mx 108document.getElementById(layName).style.top = my 109} else if(document.all){ //e4用 110document.all(layName).style.pixelLeft = mx 111document.all(layName).style.pixelTop = my 112} else if(document.layers) //n4用 113document.layers[layName].moveTo(mx,my) 114 115if(!(this.ie&&!this.mac45) || this.opr){ 116clearTimeout(fixedLAYER[layName]) 117fixedLAYER[layName]=setTimeout("fixedLAYER('"+layName+"','"+posString+"','" +offSetX+"','"+offSetY+"')",1000) 118} 119if(firstFlag){ 120 fixMy = my; 121 firstFlag = !firstFlag; 122} 123}
投稿2015/12/14 06:17
総合スコア1507
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。