Konum olan bir öğem var: sabit ve bu yüzden sayfa ile istediğim şekilde kayıyor. kullanıcı yukarı kaydırdığında, öğenin kaydırmayı belirli bir noktada durdurmasını istiyorum, örneğin sayfanın üstünden 250px olduğunda, bu mümkün mü? Herhangi bir yardım veya tavsiye yardımcı olacaktır, teşekkürler!
Bunu yapmak için jquery kullanmam gerektiğini hissettim. Kullanıcının bulunduğu yerin kaydırılmasını veya konumunu almaya çalıştım ama gerçekten kafam karıştı, herhangi bir jquery çözümü var mı?
Yanıtlar:
İşte az önce yazdığım, ihtiyacınız olanı yapabilen hızlı bir jQuery eklentisi:
$.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')tırnak içinde olmamalıdır. Ama bunun için teşekkürler, çok yardımcı oldu.
Bunun gibi mi demek istiyorsun?
$(window).scroll(function(){
$("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});
bottomve bu hesaplanan değer (250 ile fark) maks.
İşte bu sorunu çözen eksiksiz bir jquery eklentisi:
https://github.com/bigspotteddog/ScrollToFixed
Bu eklentinin açıklaması aşağıdaki gibidir:
Bu eklenti, eleman dikey olarak görünümün dışına kaydırılmışsa, öğeleri sayfanın üst kısmına sabitlemek için kullanılır; ancak, öğenin yatay kaydırma ile sola veya sağa hareket etmeye devam etmesine izin verir.
Bir marginTop seçeneği verildiğinde, dikey kaydırma hedef konuma ulaştığında öğe dikey olarak yukarı doğru hareket etmeyi durdurur; ancak sayfa sola veya sağa kaydırıldığında öğe yatay olarak hareket etmeye devam edecektir. Sayfa, hedef konumu geçecek şekilde aşağı kaydırıldığında, öğe sayfadaki orijinal konumuna geri yüklenir.
Bu eklenti Firefox 3/4, Google Chrome 10/11, Safari 5 ve Internet Explorer 8 / 9'da test edilmiştir.
Özel durumunuz için kullanım:
<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'ın cevabındaki koduyla yaptığını yapabilirsiniz, ancak bu, Chrome'da titremesini sağlayacaktır (V19'da test edilmiştir).
"Top" yerine "margin-top" koyarsanız bunu düzeltebilirsiniz. Neden margin tho ile çalıştığını gerçekten bilmiyorum.
$(window).scroll(function(){
$("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});
SADECE olası bir CSS çözümü ile elde edilebilirposition: sticky;
Tarayıcı desteği gerçekten çok iyi: https://caniuse.com/#search=position%3A%20sticky
işte bir örnek: https://jsfiddle.net/0vcoa43L/7/
display: flex;ebeveynle doğru yola koy .
çözümüm
$(window).scroll(function(){
if($(this).scrollTop()>425) {
$("#theRelative").css("margin-top",$(this).scrollTop()-425);
} else {
$("#theRelative").css("margin-top",$(this).scrollTop()-0);
}
});
});
Bir projede, aslında sayfa yüklenirken ekranın altına sabitlenmiş bazı başlığım var (bu bir çizim uygulaması, böylece başlık, geniş görünüm alanında tuval öğesine maksimum alan sağlamak için altta kalıyor).
Altbilginin üstündeki başlığı istemediğim için (başlık rengi altbilgi arka plan rengiyle aynıdır), kaydırmada altbilgiye ulaştığında başlığın 'mutlak' olması gerekiyordu.
En eski yanıtı buradan aldım (Gearge Millo tarafından düzenlenmiştir) ve bu kod parçası benim kullanım durumum için çalıştı. Bazıları oyun oynayarak bunu çalıştırdım. Artık sabit başlık, altbilgiye ulaştığında altbilginin üzerinde güzelce oturuyor.
Kullanım durumumu ve nasıl çalıştığını paylaşacağımı ve teşekkür edeceğimi düşündüm! Uygulama: 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);
}
Bununla ilgili olarak bu işlevi içeren bir blog yazısı yazdım :
$.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 Framework Kullanan Bir Çözüm.
http://mootools.net/docs/more/Fx/Fx.Scroll
$ ['MyElement'] kullanarak kaydırmayı durdurmak istediğiniz öğenin Konumunu (x & y) alın. GetPosition (). X
$ ['myElement']. getPosition (). y
Bir animasyon türü kaydırma için kullanın:
new Fx.Scroll ('scrollDivId', {offset: {x: 24, y: 432}}). toTop ();
Kaydırmayı hemen ayarlamak için şunu kullanın:
new Fx.Scroll (myElement) .set (x, y);
Bu yardımcı olur umarım !! : D
Bu çözümü beğendim
$(window).scroll(function(){
$("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});
benim sorunum, Adobe Muse'da konumla ilgili bir kapsayıcıyla uğraşmak zorunda kalmamdı.
Çözümüm:
$(window).scroll(function(){
if($(this).scrollTop()>425) {
$("#theRelative").css("margin-top",$(this).scrollTop()-425);
}
});
Sadece doğaçlama mVChr kodu
$(".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)ve $(window)değişkenleri depolamanın nedeni, yalnızca yapmanız gereken $this.height()şeydir. Bir üst konum belirlemek yerine, eklentinin orijinal üst değeri saklaması ve sabit bir genişlik ayarlarken ona geri dönmesi daha iyi olmaz mıydı? Ayrıca ne demek istiyorsun Just improvised mVChr code?
@ MVchr'nin yanıtını uyarladım ve yapışkan reklam konumlandırması için kullanmak üzere tersine çevirdim: Önemsiz başlık ekran dışına çıkana kadar mutlaka konumlandırılmasına (kaydırma) ihtiyacınız varsa, ancak daha sonra ekranda sabitlenmiş / görünür kalması gerekiyorsa:
$.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 cevabını sevdim ama tersini arıyordum yani alt bilgiden hemen önce sabit konumu durdur
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));
}
Yani şimdi sabit öğe alt bilgiden hemen önce durur. ve onunla örtüşmeyecek.