質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1125閲覧

スクロールした際に途中からついてきて途中で離れる機能

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/01/10 07:29

###前提・実現したいこと

webサイトのサイドバーの一部をスクロールした際に途中からついてきて、また途中で離れる機能をつけたいです。
以下のサイトの「シェアしてね♪」の箇所のような感じです。
http://techmemo.biz/javascript/scroll-halfway-through-content/)

特徴としては
・実装したい要素のheightが長いこと
・長いひとかたまりで、この塊ごと途中からついてきて欲しい(塊の最上部から)
・さらに途中(塊の下層部がfooterと被らない位置)で、ついてくるのをやめて、そのままスクロールできるようにしたい
(参考サイトの「シェアしてね♪」が途中で止まるイメージです。)
・記事が200くらいあるサイトなので、scrollTopの長さはページごとに変わります

###発生している問題・エラーメッセージ

現状としては、「スクロールした際に途中からついてくる」箇所はクリアしましたが、
途中で離れ、そのままスクロールする方法がわかりません。現状、css("position","absolute")にしているため元の位置に戻ってしまいます。

###該当のソースコード

JavaScript

1<script type="text/javascript"> 2 var setBoxId = '#float-box'; 3 var initOffsetTop = null; 4 $(document).ready(function() { 5 initOffsetTop = $(setBoxId).offset().top; 6 }); 7 $(window).scroll(function() { 8 scrollbox(); 9 }); 10 function scrollbox(){ 11 if(initOffsetTop == null) return; 12 var scrollTop = $(document).scrollTop(); 13 var scrollBox = $("#float-box").height(); 14 var leftHeight = $(document).height() - $(document).scrollTop(); 15 var key = leftHeight - scrollBox; 16 17 if(initOffsetTop < scrollTop && key > 300) { 18 $(setBoxId).css('position', 'fixed'); 19 $(setBoxId).animate({top: '10'}, {duration: 0}); 20 }else if(initOffsetTop < scrollTop && key < 300){ 21 $(setBoxId).css('position', 'absolute'); 22 $(setBoxId).animate({top: '10'}, {duration: 0}); 23 }else{ 24 $(setBoxId).css('position', 'absolute'); 25 $(setBoxId).animate({top: initOffsetTop}, {duration: 0}); 26 } 27 } 28 29</script>

###試したこと
JavaScriptの実装は初めてです。
該当するブログやサイトを元に、以下のことを追加しました。

・変数leftHeightで、windowのheight+これからスクロールできる合計長さ
・変数keyでleftHeightからターゲットの要素の長さを引いた残りの長さ(footer手前でついてくるのを止めたいため)

###補足情報(言語/FW/ツール等のバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

シンプルに作って見ました
https://jsfiddle.net/L7eupb3w/31/

<script> var setBoxId = '#float-box'; var scrollStart = null; var scrollEnd = null; var floatBoxTop = 40; $(document).ready(function() { scrollStart = $(setBoxId).offset().top; scrollEnd = $(document).height() - 1000 }) $(window).scroll(scroll) function scroll(){ var scrollTop = $(document).scrollTop() + floatBoxTop; scrollTop = Math.min(scrollEnd, Math.max(scrollTop, scrollStart)) if(scrollTop === scrollStart || scrollEnd === scrollTop) { $(setBoxId).css({ position:'absolute', top: scrollTop }); } else { $(setBoxId).css({ position: 'fixed', top: floatBoxTop }); } } </script>

投稿2018/01/10 08:44

oligin

総合スコア138

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/01/11 15:32

回答ありがとうございます!そのまま利用し、成功しました!
guest

0

ちょっと雑ですがこんな感じで

CSS

1#wrap{height:2000px;background-Color:yellow;position:relative;} 2#header{height:200px;background-Color:fuchsia;} 3#menu{width:100px;height:300px;background-Color:lime;position:absolute;} 4#main{width:800px;height:1800px;background-Color:aqua;position:absolute;margin-left:100px;}

javascript

1$(function(){ 2 var pos1=$('body').offset().top; 3 var pos2=$('#menu').offset().top; 4 var pos3=1000; 5 $(document).on('scroll', function() { 6 var pos4=$('body').scrollTop(); 7 if(pos4>pos3){ 8 top=pos3; 9 }else if(pos4>=pos2){ 10 top=pos4-pos1; 11 }else{ 12 top=pos2-pos1; 13 } 14 $('#menu').css("top",top); 15 }); 16});

HTML

1<div id="wrap"> 2<div id="header">header</div> 3<div id="menu">menu</div> 4<div id="main">main</div> 5</div>

投稿2018/01/10 08:40

yambejp

総合スコア114505

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/01/11 15:30

回答ありがとうございます。大変勉強になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問