Ben divher zaman kullanarak ekranın üstüne yapışır bir düzeltmeye çalışıyorum :

position: fixed;
top: 0px;
right: 0px;

Ancak, divortalanmış bir kabın içindedir. Ben kullandığınızda position:fixedo düzeltir divtarayıcının sağ tarafına karşı kalmış gibi tarayıcı penceresine göre. Bunun yerine, konteynere göre sabitlenmelidir.

Bunun position:absolutebir öğeyi göreceli olarak düzeltmek için kullanılabileceğini biliyorum div, ancak sayfayı aşağı kaydırdığınızda öğe kaybolur ve üstte olduğu gibi yapışmaz position:fixed.

Bunu başarmak için bir hack veya geçici çözüm var mı?

Kısa cevap: hayır. (Artık CSS dönüşümü ile mümkündür. Aşağıdaki düzenlemeye bakın)

Uzun cevap: "Sabit" konumlandırmanın kullanılmasındaki sorun, elemanın akıştan çıkarılmasıdır . bu nedenle ebeveynine göre yeniden konumlandırılamaz çünkü sanki bir çocuğu yokmuş gibi. Bununla birlikte, kap sabit, bilinen bir genişliğe sahipse, aşağıdaki gibi bir şey kullanabilirsiniz:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

Düzenleme (03/2015):

Bu eski bilgiler. Artık dinamik boyuttaki içeriği (yatay ve dikey) CSS3 dönüşümünün büyüsü yardımıyla ortalamak mümkün. Aynı prensip geçerlidir, ancak konteynırınızı dengelemek için marj kullanmak yerine kullanabilirsiniz translateX(-50%). Bu, yukarıdaki kenar boşluğu hilesi ile çalışmaz, çünkü genişlik sabitlenmedikçe onu ne kadar dengeleyeceğinizi bilmiyorsunuz ve göreceli değerleri (gibi 50%) kullanamıyorsunuz çünkü öğeye değil üst öğeye göre olacak uygulanan. transformfarklı davranır. Değerleri, uygulandıkları öğeye göredir. Böylece 50%için transformaraçları ise elemanının genişliğinin yarısı, 50%marjı ebeveynin genişliğinin yarısı kadardır. Bu bir IE9 + çözümüdür

Yukarıdaki örneğe benzer kod kullanarak, tamamen dinamik genişlik ve yükseklik kullanarak aynı senaryoyu yeniden oluşturdum:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

Ortalanmasını istiyorsanız, bunu da yapabilirsiniz:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Demos:

jsFiddle: Yalnızca yatay olarak ortalanmış
jsFiddle: Hem yatay hem de dikey olarak ortalanmış
Orijinal kredi , bu cevapta bana işaret ettiği için aaronk6 kullanıcısına gidiyor

Aslında bu mümkündür ve kabul edilen cevap sadece merkezileştirmeyle ilgilidir, ki bu yeterince basittir. Ayrıca gerçekten JavaScript kullanmanıza gerek yok.

Bu, herhangi bir senaryo ile başa çıkmanıza izin verecektir:

Set her şey size pozisyona istiyorsanız yaptığınız gibi: bir pozisyon içine mutlak: bağıl konteyner ve sonra birlikte div içinde yeni sabit pozisyon div oluşturmak position: absolute, ama yok değil onun üst ve sol özelliklerini ayarlayın. Ardından konteynere göre istediğiniz yere sabitlenir.

Örneğin:

/* Main site body */
.wrapper {
    width: 940px;
    margin: 0 auto;
    position: relative; /* Ensure absolute positioned child elements are relative to this*/
}

/* Absolute positioned wrapper for the element you want to fix position */
.fixed-wrapper {
    width: 220px;
    position: absolute;
    top: 0;
    left: -240px; /* Move this out to the left of the site body, leaving a 20px gutter */
}

/* The element you want to fix the position of */
.fixed {
    width: 220px;
    position: fixed;
    /* Do not set top / left! */
}

<div class="wrapper">
    <div class="fixed-wrapper">
        <div class="fixed">
            Content in here will be fixed position, but 240px to the left of the site body.
        </div>
    </div>
</div>

Ne yazık ki, bu iş parçacığının Android'in WebKit oluşturma kutusu-gölge bulanıklık piksellerini sabit konum öğelerinde kenar boşlukları olarak çözebileceğini umuyordum , ancak bu bir hata gibi görünüyor.
Neyse, umarım bu yardımcı olur!

Evet, özelliklere göre, bir yolu var.

Ben Graeme Blackwood kabul cevap olması gerektiğini kabul ederken pratikte sorunu çözer, çünkü sabit bir unsur olduğunu belirtmek gerekir olabilir onun kaba nispeten yerleştirilmelidir.

Kazara fark ettiğimde, başvuru yaparken

-webkit-transform: translateZ(0);

vücuda, ona göre sabit bir çocuk yaptı (görünüm penceresi yerine). Yani benim sabit elementlerim leftve topözelliklerim artık konteynere göreceli.

Bu yüzden biraz araştırma yaptım ve sorunun zaten Eric Meyer tarafından ele alındığını buldum ve bir "hile" gibi görünse bile, bunun özelliklerin bir parçası olduğu ortaya çıktı:

Düzeni CSS kutusu modeli tarafından yönetilen öğeler için, dönüşüm için hiçbiri dışında herhangi bir değer hem yığınlama bağlamının hem de içeren bir bloğun oluşturulmasına neden olur. Nesne, sabit konumlu torunlar için bir blok görevi görür.

http://www.w3.org/TR/css3-transforms/

Dolayısıyla, bir üst öğeye herhangi bir dönüşüm uygularsanız, onu içeren blok haline gelir.

Fakat...

Sorun, uygulamanın hatalı / yaratıcı görünmesidir, çünkü öğeler de sabit olarak davranmayı bırakırlar (bu bit spesifikasyonun bir parçası gibi görünmese bile).

Aynı davranış Safari, Chrome ve Firefox'ta bulunur, ancak IE11'de (sabit öğenin hala sabit kalacağı yerde) bulunmaz.

Bir başka ilginç (belgesiz) şey, dönüştürülmüş bir elemanın içinde sabit bir eleman bulunduğunda, onun topve leftözelliklerinin artık konteynerle ilgili olacağı, box-sizingözelliğe saygı duyduğu, kaydırma içeriğinin, sanki kutu gibi öğenin sınırının üzerine uzanacağıdır. -sizing olarak ayarlandı border-box. Orada bazı yaratıcılar için, bu muhtemelen bir oyuncak haline gelebilir :)

ÖLÇEK

Yanıt, siz ayarlamadığınız sürece left: 0veya right: 0div konumunu sabit olarak ayarladıktan sonra evettir .

http://jsfiddle.net/T2PL5/85/

Kenar çubuğu div'ı kontrol edin. Sabittir, ancak pencere görünüm noktasıyla değil üst öğe ile ilgilidir.

body { background: #ccc; }

.wrapper {
    margin: 0 auto;
    height: 1400px;
    width: 650px;
    background: green;
}

.sidebar {
    background-color: #ddd;
    float: left;
    width: 300px;
    height: 100px;
    position: fixed;
}

.main {
    float: right;
    background-color: yellow;
    width: 300px;
    height: 1400px;
}

<div class="wrapper">wrapper
    <div class="sidebar">sidebar</div>
    <div class="main">main</div>
</div>

position: stickykavramsal olarak benzer öğeleri konumlandırmanın yeni bir yoludur position: fixed. Fark, position: stickygörünümde position: relativebelirli bir ofset eşiği karşılanıncaya kadar , bir öğenin üst öğesi gibi davranmasıdır .

Chrome 56'da (şu anda Aralık 2016 itibariyle beta, Ocak 2017'de sabit) konumu: yapışkan şimdi geri döndü.

https://developers.google.com/web/updates/2016/12/position-sticky

Daha fazla detay inişlerinizi yapıştırın! pozisyon: WebKit'te yapışkan topraklar .

2019 ÇÖZÜM: position: stickyMülkü kullanabilirsiniz .

İşte kullanımı ve nasıl farklı olduğunu gösteren bir örnek CODEPENposition: fixed .

Nasıl davrandığı aşağıda açıklanmıştır:

1. Yapışkan konuma sahip bir eleman, kullanıcının kaydırma konumuna göre konumlandırılır. Temel olarak position: relative, bir öğe belirli bir ofsetin ötesine kaydırılana kadar işlev görür , bu durumda şu konuma döner: sabit. Geri kaydırıldığında önceki (göreli) konumuna geri döner.

2. Sayfadaki diğer öğelerin akışını etkiler, yani sayfadaki belirli bir alanı kaplar (tıpkı olduğu gibi position: relative).

3. Bir kabın içinde tanımlanmışsa, o kaba göre konumlandırılır. Konteynerin taşması (kaydırma) varsa, kaydırma ofsetine bağlı olarak konumuna döner: sabit.

Dolayısıyla, sabit bir işlevsellik elde etmek istiyorsanız, ancak bir kabın içinde, yapışkan kullanın.

Sadece üst ve sol stilleri div sabit pozisyonundan çıkarın. İşte bir örnek

<div id='body' style='height:200%; position: absolute; width: 100%; '>
    <div id='parent' style='display: block; margin: 0px auto; width: 200px;'>
        <div id='content' style='position: fixed;'>content</div>
    </div>
</div> 

#Content div, ana div'in bulunduğu yere oturur, ancak orada sabitlenir.

Bu jQuery eklentisini oluşturduğum benzer bir sorunu çözmek için ortalanmış bir kapsayıcı (tablo verileri) vardı ve liste kaydırıldığında üstbilginin sayfanın üst kısmına düzeltmesini istedim, ancak bağlantı yapmasını istedim kabı koyduğum her yerde (ortalanmış, sol, sağ) olacak ve ayrıca yatay olarak kaydırıldığında sayfa ile sola ve sağa hareket etmesine izin verecek şekilde çizelge verileri.

İşte bu sorunu çözebilecek bu jQuery eklentisinin bağlantısı:

https://github.com/bigspotteddog/ScrollToFixed

Bu eklentinin açıklaması aşağıdaki gibidir:

Bu eklenti, öğenin dikey olarak kaydırılması durumunda öğeleri sayfanın üstüne sabitlemek için kullanılır; ancak, öğenin yatay kaydırma ile sağa veya sola hareket etmesine izin verir.

Bir seçenek marjıTop verildiğinde, dikey kaydırma hedef konuma ulaştığında öğe dikey olarak yukarı hareket etmeyi durduracaktır; ancak sayfa sola veya sağa kaydırıldıkça öğe yatay olarak hareket eder. Sayfa aşağı kaydırıldığında hedef konumu geçtikten sonra, öğ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();
});

Bunu, müvekkilimin içerik alanının dışında oturmak istediği bir reklamla yapmak zorunda kaldım. Sadece aşağıdakileri yaptım ve bir cazibe gibi çalıştı!

<div id="content" style="position:relative; width:750px; margin:0 auto;">
  <div id="leftOutsideAd" style="position:absolute; top:0; left:-150px;">
    <a href="#" style="position:fixed;"><img src="###" /></a>
  </div>
</div>

İki HTML öğesi ve saf CSS (modern tarayıcılar)

Bu jsFiddle örneğine bakın. Sabit öğelerin içinde bulundukları kayan öğelerle nasıl hareket ettiğini bile yeniden boyutlandırın ve görün. Kaydırmanın bir sitede nasıl çalışacağını görmek için en içteki kaydırma çubuğunu kullanın (sabit öğeler sabit kalır).

Burada birçok belirttiğimiz gibi, bir anahtar üzerindeki herhangi konumsal ayarları yapmak değil fixed(hayır elemanı top, right, bottomveya leftdeğerler).

Aksine, tüm sabit elemanları (son kutunun dördüne nasıl sahip olduğunu not edin) önce konumlandırılacakları kutuya koyduk, şöyle:

<div class="reference">
  <div class="fixed">Test</div>
  Some other content in.
</div>

Sonra kullanmak margin-topve margin-leftbu CSS yaptığı gibi gibi, onların konteyner ile ilgili olarak bir şey onları "hareket":

.fixed {
    position: fixed;
    margin-top: 200px; /* Push/pull it up/down */
    margin-left: 200px; /* Push/pull it right/left */
}

Çünkü Not fixedelemanları diğer tüm düzen öğelerini görmezden son kap bizim keman içinde birden sahip olabilir fixedunsurları ve hala üst sol köşesine ilişkin tüm bu unsurları var. Ancak bu, ancak hepsi kabın içine ilk yerleştirildiyse doğrudur, çünkü bu karşılaştırma klavyesi, konteyner içeriğine dağıldığında konumlandırmanın güvenilir olmadığını gösterir .

Ambalajın statik , göreli veya konumlandırmada mutlak olması farketmez.

JQuery eklentim FixTo'yu deneyebilirsiniz .

Kullanımı:

$('#mydiv').fixTo('#centeredContainer');

Göreceli sabit bir konum elde etmek için başka bir garip çözüm, konteynerinizi bir iframe'e dönüştürmektir, böylece sabit elemanınız tüm sayfaya değil, kapsayıcının görünümüne sabitlenebilir.

Saf CSS ile bunu başaramazsınız; en azından ben yapmadım. Ancak bunu jQuery ile çok basit bir şekilde yapabilirsiniz. Sorunumu açıklayacağım ve küçük bir değişiklikle kullanabilirsiniz.

Bir başlangıç ​​için, öğemin sabit bir üst (pencerenin üstünden) ve üst öğeden devralmak için sol bir bileşene sahip olmasını istedim (üst öğe ortalanmış olduğundan). Sol bileşeni ayarlamak position:relativeiçin öğenizi üst öğeye koymanız ve üst öğe için ayarlamanız yeterlidir.

Ardından, kaydırma çubuğu üstte olduğunda y öğenizin en üstünden ne kadar olduğunu bilmeniz gerekir (y sıfır kaydırılır); yine iki seçenek var. Birincisi, statik (bir sayı) ya da üst öğeden okumak zorundasınız.

Benim durumumda üst statikten 150 piksel. Yani 150'yi gördüğünüzde, kaydırma yapmadığımız zaman üst kısımdaki öğe ne kadardır.

CSS

#parent-element{position:relative;}
#promo{position:absolute;}

jQuery

$(document).ready(function() { //This check window scroll bar location on start
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');

});
$(window).scroll(function () { //This is when the window is scrolling
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');
});

Bu kolaydır (aşağıdaki HTML'ye göre)

Hile elemanın (div) üstünde "pozisyon: sabit;" Bunlar belirtilmezse, "sabit içerik" öğesi, çevreleyen öğeye ("position: relative;" olan div) İLİŞKİSİ tarayıcı penceresine göre görüntüler !!!

<div id="divTermsOfUse" style="width:870px; z-index: 20; overflow:auto;">
    <div id="divCloser" style="position:relative; left: 852px;">
        <div style="position:fixed; z-index:22;">
            <a href="javascript:hideDiv('divTermsOfUse');">
                <span style="font-size:18pt; font-weight:bold;">X</span>
            </a>
        </div>
    </div>
    <div>  <!-- container for... -->
         lots of Text To Be Scrolled vertically...
         bhah! blah! blah!
    </div>
</div>

Yukarıda dikey kaydırma ile div bir çok metnin üst kısmında bir kapanış "X" düğmesini bulmak için izin verdi. "X" yerine oturur (kaydırılan metinle birlikte hareket etmez ve kullanıcı tarayıcı penceresinin genişliğini yeniden boyutlandırdığında kapalı div kabıyla sola veya sağa hareket eder! Bu nedenle dikey olarak "sabitlenir", kapatma elemanını yatay olarak yerleştirin!

Bu çalışmaya başlamadan önce, metin içeriğini aşağı kaydırdığımda "X" yukarı ve gözden kaybolmuştu.

Javascript hideDiv () işlevimi sağlamadığım için özür dileriz, ancak gereksiz bir şekilde bu gönderiyi daha uzun hale getirir. Mümkün olduğunca kısa tutmayı seçtim.

Bunun dönüşüm kullanarak nasıl çalıştığını göstermek için bir jsfiddle oluşturdum.

HTML

<div class="left">
    Content
</div>
<div class="right">
<div class="fixedContainer">
    X
</div>
    Side bar
</div>

CSS

body {
  margin: 0;
}
.left {
  width: 77%;
  background: teal;
  height: 2000px;
}
.right {
  width: 23%;
  background: yellow;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
}
.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    //right: 0;
    top: 0%;
    transform: translateX(-100px);
}

jQuery

$('.fixedContainer').on('click', function() {
    $('.right').animate({'width': '0px'});
  $('.left').animate({'width': '100%'});
});

https://jsfiddle.net/bx6ktwnn/1/

Aynı sorunum var, ekip üyelerimizden biri bana bir çözüm sunuyor. Div düzeltme konumuna izin vermek ve diğer div'e göre çözümümüz, fix div ve scroll div'i kaydırmak için bir baba kabı kullanmaktır.

<div class="container">
  <div class="scroll"></div>
  <div class="fix"></div>
</div>

css

.container {
  position: relative;
  flex:1;
  display:flex;
}

.fix {
  prosition:absolute;
}

/* html */

/* this div exists purely for the purpose of positioning the fixed div it contains */
<div class="fix-my-fixed-div-to-its-parent-not-the-body">

     <div class="im-fixed-within-my-container-div-zone">
          my fixed content
     </div>

</div>



/* css */

/* wraps fixed div to get desired fixed outcome */
.fix-my-fixed-div-to-its-parent-not-the-body 
{
    float: right;
}

.im-fixed-within-my-container-div-zone
{
    position: fixed;
    transform: translate(-100%);
}

Evet , elemanınızın konumunu ( topveya leftvb.) Ayarlamadığınız sürece mümkündür fixed(yine de margingöreceli bir konum ayarlamak için kullanabilirsiniz ). Simon Bos bunu bir süre önce yayınladı .

Ancak, sabit öğenin sabit olmayan akrabalarla kaydırılmasını beklemeyin.

Burada bir demo izleyin .

Bir süre önce böyle bir şey yaptım. JavaScript'te oldukça yeniydim, bu yüzden daha iyisini yapabileceğinizden eminim, ancak işte bir başlangıç ​​noktası:

function fixxedtext() {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        if (document.body.offsetWidth > 960) {
            var width = document.body.offsetWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (document.body.offsetWidth < 960) {
            var width = 960 - document.body.offsetWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    else {
        if (window.innerWidth > 960) {
            var width = window.innerWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (window.innerWidth < 960) {
            var width = 960 - window.innerWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    window.setTimeout("fixxedtext()", 2500)
}

Genişliğinizi ayarlamanız gerekir ve ardından pencere genişliğini alır ve birkaç saniyede bir kenar boşluğunu değiştirir. Ağır olduğunu biliyorum, ama işe yarıyor.

JavaScript kullanıyorsanız mümkündür. Bu durumda, jQuery eklentisi Yapışkan Kiti :

Projem Bootstrap 4 ile .NET ASP Core 2 MVC Açısal 4 şablonu. Ana uygulama bileşeni html (yani app.component.html) ilk satırda "yapışkan üst" eklenmesi aşağıdaki gibi çalıştı:

<div class='row sticky-top'>
    <div class='col-sm-12'>
        <nav-menu-top></nav-menu-top>
    </div>
</div>
<div class="row">
    <div class='col-sm-3'>
        <nav-menu></nav-menu>
    </div>
    <div class='col-sm-9 body-content'>
        <router-outlet></router-outlet>
    </div>
</div>

Bu konvansiyon mu yoksa bunu basitleştirdim mi?

position:fixedCSS kuralını kullandığınızda ve top/ left/ right/ bottomöğesini uygulamaya çalıştığınızda öğeyi pencereye göre konumlandırın.

Geçici çözüm, / / / marginyerine özellikleri kullanmaktırtopleftrightbottom

Şuna göz at:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body style="width: 1000px !important;margin-left: auto;margin-right: auto">
        <div style="width: 100px; height: 100px; background-color: #ccc; position:fixed;">
        </div>
        <div id="1" style="width: 100%; height: 600px; background-color: #800000">
        </div>
        <div id="2" style="width: 100%; height: 600px; background-color: #100000">
        </div>
        <div id="3" style="width: 100%; height: 600px; background-color: #400000">
        </div>
    </body>
</html>