私はposition：fixedの要素を持っているので、ページと一緒にスクロールします。ユーザーが上にスクロールしたとき、要素のスクロールを特定のポイントで停止させたい場合、たとえば、ページの上部から250pxになったら、これは可能ですか？何か助けやアドバイスがあれば助かります。
そのためにはjqueryを使用する必要があると感じました。ユーザーがいる場所のスクロールまたは場所を取得しようとしましたが、本当に混乱しました、jqueryソリューションはありますか？
回答:
これが、私が書いたばかりのクイックjQueryプラグインで、必要なことを実行できます。
$.fn.followTo = function (pos) {
var $this = this,
$window = $(window);
$window.scroll(function (e) {
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
});
};
$('#yourDiv').followTo(250);
$('window')引用符で囲まないでください。しかし、このおかげで、それは非常に役に立ちました。
こういう意味ですか？
$(window).scroll(function(){
$("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});
bottom、この計算値（最大250）を除きます。
この問題を解決する完全なjqueryプラグインを次に示します。
https://github.com/bigspotteddog/ScrollToFixed
このプラグインの説明は次のとおりです。
このプラグインは、要素がビューの外に垂直にスクロールされる場合に、要素をページの上部に固定するために使用されます。ただし、水平スクロールで要素が左または右に移動し続けることができます。
オプションmarginTopを指定すると、垂直スクロールがターゲット位置に到達すると、要素は垂直上方への移動を停止します。ただし、ページが左または右にスクロールされると、要素は水平方向に移動します。ページがターゲット位置を超えて下にスクロールされると、要素はページ上の元の位置に復元されます。
このプラグインは、Firefox 3/4、Google Chrome 10/11、Safari 5、およびInternet Explorer 8/9でテストされています。
特定のケースでの使用法：
<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>
$(document).ready(function() {
$('#mydiv').scrollToFixed({ marginTop: 250 });
});
James Montagneが彼のコードで彼の答えでしたことを行うことができますが、それはそれがChromeでちらつきになります（V19でテスト済み）。
「top」の代わりに「margin-top」を配置すれば修正できます。それがマージンthoで機能する理由が本当にわからない。
$(window).scroll(function(){
$("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});
可能なCSS ONLYソリューションは、position: sticky;
ブラウザのサポートは実際には本当に良いです：https : //caniuse.com/#search=position%3A%20sticky
ここに例があります：https : //jsfiddle.net/0vcoa43L/7/
私の解決策
$(window).scroll(function(){
if($(this).scrollTop()>425) {
$("#theRelative").css("margin-top",$(this).scrollTop()-425);
} else {
$("#theRelative").css("margin-top",$(this).scrollTop()-0);
}
});
});
プロジェクトでは、実際にはページの読み込み時に画面の下部にいくつかの見出しが固定されています（これは描画アプリであるため、見出しは下部にあり、ワイドビューポートのキャンバス要素に最大のスペースを提供します）。
見出しがフッターの上に表示されないようにするため、見出しがスクロール時にフッターに到達したときに「絶対」になるように見出しが必要でした（見出しの色はフッターの背景色と同じです）。
私はここで最も古い応答（Gearge Milloが編集）を取り、そのコードスニペットは私のユースケースで機能しました。いくつか遊んで、私はこれを機能させました。固定見出しは、フッターに到達すると、フッターの上に美しく表示されます。
私のユースケースとそれがどのように機能したかを共有し、ありがとうと言いました！アプリ：http : //joefalconer.com/web_projects/drawingapp/index.html
/* CSS */
@media screen and (min-width: 1100px) {
#heading {
height: 80px;
width: 100%;
position: absolute; /* heading is 'absolute' on page load. DOESN'T WORK if I have this on 'fixed' */
bottom: 0;
}
}
// jQuery
// Stop the fixed heading from scrolling over the footer
$.fn.followTo = function (pos) {
var $this = this,
$window = $(window);
$window.scroll(function (e) {
if ($window.scrollTop() > pos) {
$this.css( { position: 'absolute', bottom: '-180px' } );
} else {
$this.css( { position: 'fixed', bottom: '0' } );
}
});
};
// This behaviour is only needed for wide view ports
if ( $('#heading').css("position") === "absolute" ) {
$('#heading').followTo(180);
}
私はこの機能を特徴とするこれについてのブログ投稿を書きました：
$.fn.myFixture = function (settings) {
return this.each(function () {
// default css declaration
var elem = $(this).css('position', 'fixed');
var setPosition = function () {
var top = 0;
// get no of pixels hidden above the the window
var scrollTop = $(window).scrollTop();
// get elements distance from top of window
var topBuffer = ((settings.topBoundary || 0) - scrollTop);
// update position if required
if (topBuffer >= 0) { top += topBuffer }
elem.css('top', top);
};
$(window).bind('scroll', setPosition);
setPosition();
});
};Mootoolsフレームワークを使用したソリューション。
http://mootools.net/docs/more/Fx/Fx.Scroll
$（ 'myElement'）。getPosition（）。xを使用して、スクロールを停止する要素のPosition（x＆y）を取得します
$（ 'myElement'）。getPosition（）。y
アニメーションの一種のスクロール使用：
新しいFx.Scroll（ 'scrollDivId'、{offset：{x：24、y：432}}）。toTop（）;
すぐにスクロールを設定するには、次のコマンドを使用します。
新しいFx.Scroll（myElement）.set（x、y）;
お役に立てれば ！！：D
私はこのソリューションが好き
$(window).scroll(function(){
$("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});私の問題は、Adobe Museでコンテナーの位置関係を処理しなければならないことでした。
私の解決策：
$(window).scroll(function(){
if($(this).scrollTop()>425) {
$("#theRelative").css("margin-top",$(this).scrollTop()-425);
}
});即興のmVChrコード
$(".sidebar").css('position', 'fixed')
var windw = this;
$.fn.followTo = function(pos) {
var $this = this,
$window = $(windw);
$window.scroll(function(e) {
if ($window.scrollTop() > pos) {
topPos = pos + $($this).height();
$this.css({
position: 'absolute',
top: topPos
});
} else {
$this.css({
position: 'fixed',
top: 250 //set your value
});
}
});
};
var height = $("body").height() - $("#footer").height() ;
$('.sidebar').followTo(height);
$('.sidebar').scrollTo($('html').offset().top);$(this)と$(window)あなたが唯一のしなければならないので、変数ではある$this.height()ようにと。上部の位置を設定する代わりに、プラグインが元の上部の値を保存し、固定幅を設定するときに元の上部の値に戻せば、より良いと思いませんか？また、どういう意味Just improvised mVChr codeですか？
私は@mVchrの回答を適応させ、スティッキー広告の配置に使用するように反転しました。ヘッダージャンクが画面から外れるまで絶対的に配置（スクロール）する必要があるが、その後画面に固定/表示されたままにする必要がある場合：
$.fn.followTo = function (pos) {
var stickyAd = $(this),
theWindow = $(window);
$(window).scroll(function (e) {
if ($(window).scrollTop() > pos) {
stickyAd.css({'position': 'fixed','top': '0'});
} else {
stickyAd.css({'position': 'absolute','top': pos});
}
});
};
$('#sticky-ad').followTo(740);CSS：
#sticky-ad {
float: left;
display: block;
position: absolute;
top: 740px;
left: -664px;
margin-left: 50%;
z-index: 9999;
}私は@jamesの回答が大好きでしたが、その逆、つまりフッターの直前に固定位置を停止することを探していました。これが私が思いついたものです
var $fixed_element = $(".some_element")
if($fixed_element.length){
var $offset = $(".footer").position().top,
$wh = $(window).innerHeight(),
$diff = $offset - $wh,
$scrolled = $(window).scrollTop();
$fixed_element.css("bottom", Math.max(0, $scrolled-$diff));
}そのため、固定要素はフッターの直前で停止します。そしてそれと重複しません。