Bitrix düzeltme kenar çubuğu banner değişikliği php. Sabit iki sütunlu düzen
HTML+CSS+JS'deki sabit kayan kenar çubuğunun en basit örneği.
Tuhaflığı nedir - kaydırırken, kenar çubuğu pencerenin üstüne yapışır, ancak aynı zamanda kenar çubuğu alt bilgiye kaydırıldığında, ekranın üstünden çıkar ve kendi başına yapışır. alt böylece alt bilgi üst üste gelmez (alt bilgi yüksek olmalıdır). Eğer ne demek istediğimi anlıyorsan.
Örnek bir siteden alınmıştır ve çok ilkeldir (ve ahlaki açıdan modası geçmiştir), yalnızca bu düzen için uygundur. Bu makalede daha fazla evrensel kod bulunabilir ve projeniz için zaten kendi kodunuzu yazabilirsiniz.
Basit bir sayfa için HTML işaretlemesi BAŞLIK İÇERİĞİ SABİT KENAR ÇUBUĞU ALT BİLGİSİ İçerik blokları için CSS stilleri .header (genişlik: %100; arka plan: mor; yükseklik: 80 piksel; ) .content ( genişlik: %80; arka plan: mavi; yükseklik: 800 piksel; kayan nokta) : sol; ) .kenar çubuğu (genişlik: %20; arka plan: yeşil; yükseklik: 100px; kayan nokta: sağ; ) .sidebar.fixed ( konum: sabit; sağ: %50; sağ kenar boşluğu: -%50; ) .footer (genişlik: %100; arka plan: gri; yükseklik: 500 piksel; açık: her ikisi; ) Sayfa kaydırmada sabit kenar çubuğu için JS betiğijQuery'i dahil etmeyi unutmayın
$(function() ( var $window = $(window); var $sidebar = $(".sidebar"); var $sidebarTop = $sidebar.position().top; var $sidebarHeight = $sidebar.height() ; var $footer = $(".footer"); var $footerTop = $footer.position().top; $window.scroll(function(event) ( $sidebar.addClass("sabit"); var $scrollTop = $window.scrollTop(); var $topPosition = Math.max(0, $sidebarTop - $scrollTop); if ($scrollTop + $sidebarHeight > $footerTop) ( var $topPosition = Math.min($topPosition, $footerTop -) $scrollTop - $sidebarHeight); ) $sidebar.css("top", $topPosition); )); ));
Kullanıcının sayfayı kaydırırken reklamın en sık yerleştirildiği (iltifatlar, afişler veya bağlam) bir sabit öğe görmesi için sitede kayan bir bloğa (veya aynı zamanda hareketli, sabit, sıkışmış olarak da adlandırılır) ihtiyaç vardır.
Ne yazık ki, adsense kuralları bize bunu yasaklıyor. Ancak, birçok site sahibi, riski kendilerine ait olmak üzere kuralları görmezden gelir. Belki bunun için ceza bile almıyorlar ama risk almanızı tavsiye etmem.
YAN'ı, teaser'larımı/banner'larımı bu tür bloklara yerleştiriyorum ve bazen reklam vermek yerine, ziyaretçi için benzer gönderiler veya bazı faydalı bilgiler gösteriyorum.
Size sitenizde nasıl kayan bir blok yapabileceğinizi anlatalım.
Görev: kenar çubuğundaki (kenar çubuğu) son bloğu yüzer hale getirin. Üstelik sayfa açıldığında hemen değil, yalnızca kullanıcının kaydırarak ulaştığı anda yapışacak şekilde. Ayrıca, blok alt bilgiye ulaşarak (yani üst üste binmeyerek) “yapışmalıdır”.
En çok çalışan yolYapışkan bloğun birçok uygulaması vardır, ancak hepsi doğru şekilde çalışmaz. Size kişisel deneyimimden bahsedeceğim: aynı blok yükleme yöntemi bir sitede işe yarayabilir ve diğerinde pervazlar görünecektir.
Aşağıda, kurduğum hemen hemen her sitede çalışan bir kayan blok örneği var. Keçi yoktu. Motor da önemli değil (DLE, WordPress, LiveStreet vb.).
Aşağıdaki HTML kodunu kenar çubuğunun istediğiniz konumuna yapıştırın:
$(pencere).scroll(işlev() (
var sb_m = 20 ; /* üst ve alt dolgu */
değişken mb = 300 ; /* kenar boşluğu ile taban yüksekliği */
varst = $(pencere).scrollTop() ;
var sb = $(".yapışkan blok" ) ;
var sbi = $(".yapışkan blok .iç" ) ;
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.yükseklik () ;
If(sb_h + $(document).scrollTop() + sb_m + mb< $(document)
.height
()
)
{
if(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(("paddingTop" : h) ) ;
}
başka(
sb.css(("paddingTop" : 0 ) ) ;
}
}
}
)
;
Bu kodda, altbilginizin üstünü, altını ve yüksekliğini ayarlayabilirsiniz, yani. bloğun durması gereken yükseklik.
Şimdi JS'yi dahil ediyoruz. Bunu yapmak için HEAD bölümüne şunu yazın:
En kolay yol (WordPress için)Ayrıca hataya karşı güvenli bir yöntem, ancak . Söve olmadan çalışır.
Avantajlar:
- HTML'yi anlamaya/anlamaya gerek yok;
- kurulum kolaylığı ve hızı.
Kusurlar:
Nasıl kullanılır:
Bana daha az uygun göründüler ve yukarıdaki iki yöntem kadar net değillerdi. Ama yine de size onlardan bahsedeceğim.
Seçenek 1 (jQuery olmadan)Kenar çubuğuna yapıştırın:
Stilleri HTML'de yazıyoruz (hemen CSS'ye eklemek daha iyidir):
.yapışkan(
pozisyon: sabit;
z-endeksi: 101
}
.durmak(
konum: göreli;
z-endeksi: 101
}
Şimdi betiğin kendisini sayfaya ekliyoruz (bunu içine koymak daha iyidir) ayrı dosya, "En çok çalışan yol"da olduğu gibi):
(işlev() (
var a = document.querySelector("#aside1" ) , b = null, P = 0 ; // sıfır bir sayı ile değiştirilirse, blok, tarayıcı penceresinin üst kenarı öğenin üst kenarına ulaşmadan önce sabitlenir. negatif bir sayı olabilir
window.addEventListener("kaydırma" , Ascroll, false) ;
document.body.addEventListener("kaydırma" , Ascroll, false) ;
Ascroll() işlevi (
eğer (b == boş) (
var Sa = getComputedStyle(a, "" ) , s = "" ;
için (var i = 0 ; ben< Sa.length; i++)
{
if (Sa[ i] .indexOf("kutu boyutlandırma" ) == 0 || Sa[ i] .indexOf("taşma" ) == 0 || Sa[ i] .indexOf("genişlik" ) == 0 || Sa[ i] .indexOf("padding" ) == 0 || Sa[ i] .indexOf("border" ) == 0 || Sa[ i] .indexOf("outline" ) == 0 || Sa[ i] .indexOf("box-shadow" ) == 0 || Sa[ i] .indexOf("arka plan" ) == 0 ) (
s += Sa[ i] + ": " +Sa.getPropertyValue(Sa[ i] ) + "; "
}
}
a.innerHTML = "" +a.innerHTML+"" ;
b = a.çocuklar[ 0 ] ;
a.style .height = b.getBoundingClientRect() .height + "px" ;
a.style .padding = "0" ;
a.style .border = "0" ;
}
varRa = a.getBoundingClientRect() ,
R = Math.round(Ra.top + b.getBoundingClientRect() .height - document.querySelector("altbilgi") .getBoundingClientRect() .top + 0 ) ; // yapışkan elemanın sabitlenmesi gereken üst kenara ulaşıldığında blok seçici; Math.round() yalnızca IE içindir; sıfır bir sayı ile değiştirilirse, öğenin alt kenarı alt bilgiye ulaşmadan önce blok sabitlenir
eğer ((Ra.top - P)
Lütfen, echo "" içine alınmış kodda tek tırnak varsa, o zaman bunların kaçılması gerekeceğini unutmayın, örn. tabii ki her birinin başına parantezsiz bir ters eğik çizgi (\") ekleyin.
Genel olarak, nasıl olduğu ortaya çıktı. Bunu özellikle konunuza nasıl bağlayacağınıza, kendiniz karar vermeniz gerekecek - zaman olduğunda, "kafanızı kırmak" bile harika. Teşekkür ederim.
Sana iyi şanslar! Yakında blog sayfaları sitesinde görüşmek üzere
ilginizi çekebilir
WebPoint PRO, geniş işlevselliğe ve yetkin teknik arama motoru optimizasyonuna sahip, duyarlı bir WordPress temasıdır. 
Share42 - siteye sosyal ağ düğmeleri ve yer imleri eklemek için komut dosyası (yüzen bir panel seçeneği vardır)
Düzen gereksinimleri nelerdir?
- Kauçuk iki sütunlu düzen
- kenar çubuğu sabit genişlik 300px
- içerik, genişliğin geri kalanına kadar uzatılır.
- altbilgi en alta bastırıldı (bu eğitimde bunun nasıl yapıldığını göstermeyeceğim).
Blokları yüzdürürseniz, onlara sabit bir genişlik vermelisiniz (1 kenar çubuğunu 300px ve 100px içeriğe ayarlayamazsınız).Bu durumda, içerik aşağı kayar veya sola doğru 300px yatay kaydırma görünür. Peki, anlaşılması gereken asıl şey, bu yöntemin bize uygun olmadığıdır.
2 yol. Birçok dizgici bu yöntemi sunuyor, ne düşünüyorlar?! Yöntemin özü, kenar çubuğunu 300 genişlikte yüzecek ve içeriği yüzmeyecek şekilde ayarlayabilmeniz ve ona sol kenar boşluğu: 300 piksel olarak ayarlayabilmenizdir. İyi bir yol ve her şey çok iyi çalışıyor gibi görünüyor. Dürüst olmak gerekirse, bunun en iyi yol olduğunu düşündüm ama bu yöntemin de kendine göre tuzakları var. Bu yöntemi terk etmemizin nedenleri, içerikte aniden, örneğin kayan li veya başka herhangi bir kayan blok içeren bir menü oluşturduğumuzda ve ardından bunları clear:both ile temizlemek istediğimizde, bu bloğun alt kenarlığı kayar. kenar çubuğunun alt sınırının seviyesine kadar (Kabartma temizlendiğinden bu garip değil, kayan bloğu sabit bir yüksekliğe ayarlarsanız bundan kaçınabilirsiniz, ancak bu sabit bir yükseklik ayarlamak için hiç de geçerli değildir. ).
3 yol. Mutlak kenar çubuğu konumu için kullanılabilir, ancak yalnızca içeriğin kenar çubuğundan daha yüksek olacağından eminseniz, aksi takdirde kenar çubuğunun tüm içeriği alt bilgiye sığacaktır (sonuçta, mutlak konumlandırma genel akışın dışına çıkar) ).
Ama bana gelince, bu da pek iyi bir yol değil!
4 yol. "Harika yol, kusurları varsa lütfen yorum yapın. Ama bence en iyi yol bu."
- Bu yöntemin avantajları: ilk olarak, DOM içeriği kenar çubuğundan önce gelir, bu da arama motorları için iyidir.
- hiçbir şey altbilgiye sığmaz
- herhangi bir blok temizlenebilir ve hiçbir şey alt sınıra kaymaz (Böylece ikinci yöntemin sorunlarını aştık).
Genel olarak, nasıl çalışır: koda bakın, önce içerik gelir, ardından kenar çubuğu gelir. bu iki bloğa float ayarlıyoruz (elbette kenar çubuğu aşağı kayıyor). bundan sonra kenar çubuğu özelliğini margin-left:-100% olarak ayarladık. harika, yerine geri döndü ve içeriği margin-lerft:300px ile girintiledi.
html css .kenar çubuğu(
genişlik:300 piksel;
Ekran bloğu;
kayan nokta: sol;
marj: 0 0 0 -100%;
}
.içerik(
minimum genişlik:723px;
Ekran bloğu;
kayan nokta: sol;
kenar boşluğu: 0 0 0 220 piksel;
}
İlginç bir şekilde, kaydırma sırasında tek bir yerde kalan bloğa "hareket eden", "kayan", "hareket eden", "hareket eden", "kayan" denir. Ama aslında, web sayfasının kaydırma derecesi ne olursa olsun, monitör ekranının belirli bir alanında "sıkışmış", "hareketsiz", "sabit" ve yer almaktadır.
Hiçbir şeyin yüzmediği ilk varyantBaşlangıç verileri: blok halihazırda konumlandırılmıştır. Bunun gibi büyük bir altbilgiye sahip bir şeyim var, farklı bir şekilde sahipsin.
Blok (div, kenara vb.), başlık, reklam, menü nasıl yapılır düzeltildi. Yalnızca CSS #aside1 ( /* yerinde kalmak için blok */ pozisyon: sabit; z-endeksi: 101; )Aslında, çoğu durumda: sosyal ağların kayan düğmeleri, sayaçlar, bir komut dosyası gerekli değildir.
Sayfayı kaydırırken bir div blok çubuğu nasıl yapılır. Zaten bir komut dosyasıYani, bağlantıları olan öğe (veya her neyse), sayfanın başından çok uzaktadır. Diyelim ki başlık büyük veya kenar çubuğu arama, başlıklar vb. gibi pek çok kullanışlılık içeriyor. Kaydırma sırasında tarayıcı penceresinin üst kısmı bir öğenin üst kenarına dokunduğunda, öğe yapışır ve sayfanın sonuna kadar "sürülür".
.sticky( konum: sabit; üst: 0 piksel; /* sıfırın yerine bir sayı konulursa (ve betikte de), bu durumda blok, tarayıcı penceresinin üst kenarı öğenin üst kenarına ulaşmadan önce sabitlenir. Negatif bir sayı olabilir. Örneğin, */ kullanalım z-endeksi: 101; ) (işlev()( // anonim işlev (işlev()( ))() böylece "a" ve "b" değişkenleri genel olmaz var a = document.querySelector("#aside1 "), b = null; // sabitlenecek blok seçici // Eğer Ascroll() işlevi ( if (b == null) ( // komşulara bağımlılığı kaldırmak için bir alt sarmalayıcı ekleyin var Sa = getComputedStyle(a, ""), s = ""; için (var ben = 0; ben< Sa.length; i++) { // if (Sa[i].indexOf("taşma") == 0 || Sa[i].indexOf("padding") == 0 || Sa[i].indexOf("border") == 0 || Sa[i].indexOf("anahat") == 0 || Sa[i].indexOf("kutu-gölge") == 0 || Sa[i].indexOf("arka plan") == 0) ( s += Sa[i] + ": " +Sa.getPropertyValue(Sa[i]) + "; " ) ) b = document.createElement("div"); // bir çocuk oluştur b.style.cssText = s + " kutu boyutlandırma: kenarlık kutusu; genişlik: " + a.offsetWidth + "px;"; a.insertBefore(b, a.firstChild); // önce çocuğu tutunma bloğuna koy varl = a.childNodes.length; için (var ben = 1; ben< l; i++) { // diğer tüm alt öğeleri yeni oluşturulan alt öğeye taşı (toplam: içinde hangi betiklerin hala çalıştığı) b.appendChild(a.childNodes); ) a.style.height = b.getBoundingClientRect().height + "px"; // kayan elemanın altında başka bloklar varsa kendi değerinizi kullanabilirsiniz a.style.padding = "0"; a.style.border = "0"; // eğer eleman atanmışsa veya) if (a.getBoundingClientRect().top #aside1 > div:nth-child(3), #aside2 > div:nth-child(2) ")).forEach(function(a) ( // sabitlenecek blok seçiciler. Bir blok veya iki veya daha fazla olabilir var b = boş, P = 0 ; window.addEventListener("kaydırma", Ascroll, yanlış); document.body.addEventListener("kaydırma", Ascroll, yanlış); Ascroll() işlevi ( if (b == null) ( var Sa = getComputedStyle(a, ""), s = ""; for (var i = 0; i< Sa.length; i++) { if (Sa[i].indexOf("overflow") == 0 || Sa[i].indexOf("padding") == 0 || Sa[i].indexOf("border") == 0 || Sa[i].indexOf("outline") == 0 || Sa[i].indexOf("box-shadow") == 0 || Sa[i].indexOf("background") == 0) { s += Sa[i] + ": " +Sa.getPropertyValue(Sa[i]) + "; " } } b = document.createElement("div"); b.style.cssText = s + " box-sizing: border-box; width: " + a.offsetWidth + "px;"; a.insertBefore(b, a.firstChild); var l = a.childNodes.length; for (var i = 1; i < l; i++) { b.appendChild(a.childNodes); } a.style.height = b.getBoundingClientRect().height + "px"; a.style.padding = "0"; a.style.border = "0"; } var Ra = a.getBoundingClientRect(), R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector("#article ").getBoundingClientRect().bottom + 0 ); if ((Ra.top - P) Array.prototype.slice.call(document.querySelectorAll("#aside1 div.stickyDa ")).forEach(function(a) { var b = null, P = 0 ; window.addEventListener("scroll", Ascroll, false); document.body.addEventListener("scroll", Ascroll, false); function Ascroll() { if (b == null) { var Sa = getComputedStyle(a, ""), s = ""; for (var i = 0; i < Sa.length; i++) { if (Sa[i].indexOf("overflow") == 0 || Sa[i].indexOf("padding") == 0 || Sa[i].indexOf("border") == 0 || Sa[i].indexOf("outline") == 0 || Sa[i].indexOf("box-shadow") == 0 || Sa[i].indexOf("background") == 0) { s += Sa[i] + ": " +Sa.getPropertyValue(Sa[i]) + "; " } } b = document.createElement("div"); b.style.cssText = s + " box-sizing: border-box; width: " + a.offsetWidth + "px;"; a.insertBefore(b, a.firstChild); var l = a.childNodes.length; for (var i = 1; i < l; i++) { b.appendChild(a.childNodes); } a.style.height = b.getBoundingClientRect().height + "px"; a.style.padding = "0"; a.style.border = "0"; } var Ra = a.getBoundingClientRect(), R = Math.round(Ra.top + b.getBoundingClientRect().height - a.parentNode.getBoundingClientRect().bottom + parseFloat(getComputedStyle(a.parentNode, "").paddingBottom.slice(0, -2))); if ((Ra.top - P) (function(){ var A0 = document.querySelector("#aside1 "), A1 = A0.querySelectorAll(".stickyDa "); Array.prototype.slice.call(A1).forEach(function(a, index) { var b = null, P = 0 ; window.addEventListener("scroll", Ascroll, false); document.body.addEventListener("scroll", Ascroll, false); function Ascroll() { if (b == null) { var Sa = getComputedStyle(a, ""), s = ""; for (var i = 0; i < Sa.length; i++) { if (Sa[i].indexOf("overflow") == 0 || Sa[i].indexOf("padding") == 0 || Sa[i].indexOf("border") == 0 || Sa[i].indexOf("outline") == 0 || Sa[i].indexOf("box-shadow") == 0 || Sa[i].indexOf("background") == 0) { s += Sa[i] + ": " +Sa.getPropertyValue(Sa[i]) + "; " } } b = document.createElement("div"); b.style.cssText = s + " box-sizing: border-box; width: " + a.offsetWidth + "px;"; a.insertBefore(b, a.firstChild); var l = a.childNodes.length; for (var i = 1; i < l; i++) { b.appendChild(a.childNodes); } a.style.height = b.getBoundingClientRect().height + "px"; a.style.padding = "0"; a.style.border = "0"; } var Ra = a.getBoundingClientRect(), R, Rh = Ra.top + b.getBoundingClientRect().height; if (A1 != undefined) { R = Math.round(Rh - A1.getBoundingClientRect().top + 5 ); // kayan elemanların birbirine yakın durmaması için bloklar arasındaki mesafe) else ( R = Math.round(Rh - A0.getBoundingClientRect().bottom + parseFloat(getComputedStyle(A0, "").paddingBottom.slice(0, -2))); ) if ((Ra.top - P ) W) ( eğer (Ra.top< K) { // Aşağı kaydır eğer (R2 + N > R1) ( // dibe ulaşma eğer (Rb.bottom - W + N = 0) ( // ilişki kurmak b.className = "yapışkan"; b.style.top = P + "px"; Z = Ra.top - P; ) else ( b.className = "stop"; b.style.top = - Z + "px"; ) ) else ( b.className = ""; b.style.top = ""; Z = 0; ) ) K = Ra.top; ) else ( if ((Ra.top - P)