Posisi tetap tetapi relatif terhadap wadah


639

Saya mencoba untuk memperbaiki divsehingga selalu menempel di bagian atas layar, menggunakan:

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

Namun, divada di dalam wadah terpusat. Ketika saya menggunakannya position:fixedmemperbaiki divrelatif ke jendela browser, seperti itu di sisi kanan browser. Sebaliknya, itu harus diperbaiki relatif terhadap wadah.

Saya tahu itu position:absolutedapat digunakan untuk memperbaiki elemen relatif terhadap div, tetapi ketika Anda menggulir ke bawah halaman elemen menghilang dan tidak menempel ke atas seperti dengan position:fixed.

Apakah ada peretasan atau solusi untuk mencapai ini?


"Tether adalah pustaka UI tingkat rendah yang dapat digunakan untuk memposisikan elemen apa pun pada halaman di sebelah elemen lainnya." github.com/shipshapecode/tether + Demo / Documents at tether.io
Kai Noack

Jawaban:


408

Jawaban singkat: tidak. (Sekarang dimungkinkan dengan transformasi CSS. Lihat hasil edit di bawah)

Jawaban panjang: Masalah dengan menggunakan pemosisian "tetap" adalah ia menghilangkan elemen dari aliran . sehingga tidak dapat diposisikan kembali relatif terhadap induknya karena seolah-olah tidak memilikinya. Namun, jika wadah memiliki lebar tetap yang diketahui, Anda dapat menggunakan sesuatu seperti:

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

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

Edit (03/2015):

Ini adalah informasi yang sudah ketinggalan zaman. Sekarang dimungkinkan untuk memusatkan konten dengan ukuran dinamis (horizontal dan vertikal) dengan bantuan keajaiban transformasi CSS3. Prinsip yang sama berlaku, tetapi alih-alih menggunakan margin untuk mengimbangi wadah Anda, Anda bisa menggunakannya translateX(-50%). Ini tidak berfungsi dengan trik margin di atas karena Anda tidak tahu berapa banyak untuk mengimbanginya kecuali lebarnya diperbaiki dan Anda tidak dapat menggunakan nilai relatif (seperti 50%) karena itu akan relatif terhadap induk dan bukan elemen itu diaplikasikan ke. transformberperilaku berbeda. Nilai-nilainya relatif terhadap elemen yang diterapkannya. Jadi, 50%untuk transformberarti setengah lebar elemen, sedangkan 50%untuk margin adalah setengah dari lebar induk. Ini adalah solusi IE9 +

Menggunakan kode yang mirip dengan contoh di atas, saya membuat ulang skenario yang sama menggunakan lebar dan tinggi dinamis sepenuhnya:

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

Jika Anda ingin pusatnya, Anda bisa melakukannya juga:

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

Demo:

jsFiddle: Hanya
terpusat secara horizontal jsFiddle: Berpusat secara horizontal dan vertikal
Kredit asli diberikan kepada pengguna aaronk6 karena menunjukkannya kepada saya dalam jawaban ini


Bekerja dengan baik untuk saya. Meskipun saya membutuhkan milik saya di sebelah kiri dan sudah terpusat, div tidak tetap, jadi hanya harus mengurangi margin kiri sampai sejajar. Tidak tetap sejajar apa pun lebar jendela. Terima kasih. +1
Iain M Norman

9
@Joseph tahu mengapa position:fixedtanpa menentukan topatau left terkadang berhasil? Beberapa browser nampak default elemen ke tempat biasanya, jika itu memiliki posisi normal. stackoverflow.com/questions/8712047/…
Flash

2
bagaimana tanpa tinggi dan lebar tetap? Dalam kasus saya, saya belum memberikan lebar sinyal ke wadah apa pun bahkan hingga tag tubuh. Solusi apa yang akan Anda katakan untuk saya lakukan.
mfq

1
@mfq Sayangnya, metode ini tidak akan berfungsi sama sekali tanpa diketahui tinggi dan lebarnya. Apa yang Anda lakukan akan sangat tergantung pada apa yang Anda coba pusatkan. Jika gambar, gunakan saja sebagai latar wadah 100% x 100%. Jika elemen aktual yang benar-benar dinamis, Anda mungkin harus menjelajahi menggunakan solusi javascript untuk mendapatkan dimensi.
Joseph Marikle

2
Saya telah menemukan bahwa menambahkan left:inheritelemen posisi tetap dapat memaksa browser untuk menghormati offset orangtua.
Willster

180

Sebenarnya ini mungkin dan jawaban yang diterima hanya berurusan dengan sentralisasi, yang cukup mudah. Anda juga benar-benar tidak perlu menggunakan JavaScript.

Ini akan memungkinkan Anda menangani setiap skenario:

Set semuanya seperti yang Anda lakukan jika Anda ingin position: absolute dalam posisi: wadah relatif, dan kemudian membuat div posisi tetap baru di dalam div dengan position: absolute, tetapi tidak set top dan sifat kiri. Kemudian akan diperbaiki di mana pun Anda inginkan, relatif terhadap wadah.

Sebagai contoh:

/* 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>

Sayangnya, saya berharap thread ini mungkin memecahkan masalah saya dengan Android WebKit piksel render kotak-bayangan blur sebagai margin pada unsur-unsur posisi tetap, tetapi tampaknya itu bug.
Bagaimanapun, saya harap ini membantu!


1
Skenario APA SAJA tapi itu bukan awal yang baik. Jika ada banyak ruang di bawah .wrapper maka .fixed-wrapper Anda akan berakhir di bagian bawah induk tetapi elemen .fixed Anda akan terus mengalir keluar dari kedua wadah dan ke konten apa pun di bawah ini. Seperti yang saya katakan, ini adalah awal yang baik, tidak sempurna, tetapi saya tidak melihat bagaimana ini dapat dicapai tanpa beberapa js.
o_O

4
Ini tidak cocok dengan desain fluida.
Zuhaib Ali

3
saya mencoba melakukan ini, tetapi ketika dan ketika saya gulir ke bawah, header yang telah saya terapkan tetap (dengan orangtua mutlak yang orang tuanya relatif) tidak bergerak seperti yang saya gulir.
Mirage

Ini bekerja untuk saya dengan div kanan atas di Chromium dan Firefox, kecuali bahwa posisi vertikal div tetap berbeda (di Chromium itu di atas div induk, di Firefox itu di dalam).
Damien

2
Ini jawaban untukku! Terima kasih @Graeme Blackwood
Tabu.Net

136

Ya, menurut spesifikasi, ada cara.

Sementara saya setuju bahwa Graeme Blackwood harus menjadi jawaban yang diterima, karena secara praktis menyelesaikan masalah, perlu dicatat bahwa elemen tetap dapat diposisikan relatif ke wadahnya.

Saya perhatikan secara tidak sengaja ketika melamar

-webkit-transform: translateZ(0);

ke tubuh, itu membuat anak tetap relatif terhadap itu (bukan viewport). Jadi elemen leftdan topproperti tetap saya sekarang relatif terhadap wadah.

Jadi saya melakukan riset, dan menemukan bahwa masalah itu sudah dibahas oleh Eric Meyer dan bahkan jika itu terasa seperti "trik", ternyata ini adalah bagian dari spesifikasinya:

Untuk elemen yang tata letaknya diatur oleh model kotak CSS, nilai apa pun selain tidak ada untuk hasil transformasi dalam penciptaan konteks penumpukan dan blok yang berisi. Objek bertindak sebagai blok yang berisi untuk keturunan yang diposisikan tetap.

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

Jadi, jika Anda menerapkan transformasi apa pun ke elemen induk, itu akan menjadi blok yang berisi.

Tapi...

Masalahnya adalah implementasinya nampak buggy / kreatif, karena elemen-elemennya juga berhenti berperilaku sebagai tetap (walaupun bit ini tampaknya tidak menjadi bagian dari spesifikasi).

Perilaku yang sama akan ditemukan di Safari, Chrome dan Firefox, tetapi tidak di IE11 (di mana elemen tetap akan tetap diperbaiki).

Hal lain yang menarik (tidak terdokumentasi) adalah ketika elemen tetap terdapat di dalam elemen yang ditransformasikan, sedangkan properti topdan leftpropertinya sekarang akan terkait dengan wadah, menghormati box-sizingproperti, konteks penggulirannya akan melampaui batas elemen, seolah-olah kotak -ukuran diatur ke border-box. Untuk beberapa kreatif di luar sana, ini mungkin bisa menjadi mainan :)

UJI


4
Ini memungkinkan saya untuk membuat tabel dengan header tetap di dalam wadah
Zach Saucier

Bagus, ini bekerja untuk saya di Chrome. Ada ide tentang cara mencapai hal yang sama di IE? Saya sudah mencoba menggunakan translateZ tetapi tidak dalam versi IE mana pun.
Anish Patel

Sama .. apakah ada yang tahu bagaimana melakukan ini di IE? itu semacam rasa sakit untuk mendeteksi browser, kemudian secara sistematis menunjukkan atau tidak menunjukkan left:(mengingat itu mengacaukannya)
Tallboy

Saya hanya memenuhi kondisi sebaliknya yang perlu saya perbaiki dalam wadah relatif tetapi diubah oleh properti transformasi. Jawaban Anda sangat membantu, terima kasih!
Ahli mitologi

8
@Francesco Frapporti sepertinya ini tidak lagi berfungsi ... dalam versi terbaru Chrome (Versi 42.0.2311.90) :(
jjenzz

60

Jawabannya adalah ya, selama Anda tidak mengatur left: 0atau right: 0setelah Anda mengatur posisi div untuk diperbaiki.

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

Periksa div sidebar. Itu sudah diperbaiki, tetapi terkait dengan induknya, bukan ke titik tampilan jendela.

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>

12
Ada alasan mengapa ini tidak mendapatkan lebih banyak upvotes? Tampaknya solusi yang paling jelas bagi saya.
Lacak

Bagaimana dengan kompatibilitas lintas browser. Apakah ada di antara Anda yang memeriksa ini?
Alexandre Bourlier

3
Ini benar tetapi hanya untuk 'posisi' elemen tetap. Ini tidak akan menghormati lebar wadah atau mengubah ukuran dengan cara apa pun. Misalnya, Jika Anda memiliki pembungkus cairan dengan lebar maks: 1000px; margin: otomatis; ini tidak akan berhasil. Jika semuanya bisa menjadi lebar tetap, maka ya ini akan menyelesaikan masalah Anda.
Rhys

3
@AlexandreBourlier Ya, ini berfungsi baik bagi saya untuk elemen tetap di Chrome, Firefox, dan IE11 setidaknya.
Jason Frank

Bekerja dengan sempurna. Harus menambahkan margin-kiri: X% untuk membawa elemen ke kanan wadah
Anand

45

position: stickyitu adalah cara baru untuk memposisikan elemen yang secara konsep mirip dengan position: fixed. Perbedaannya adalah bahwa elemen dengan position: stickyberperilaku seperti position: relativedi dalam induknya, sampai ambang offset yang diberikan terpenuhi di viewport.

Di Chrome 56 (saat ini beta pada Desember 2016, stabil pada Januari 2017) posisi: sticky sekarang kembali.

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

Lebih detail ada di Stick pendaratan Anda! posisi: tanah lengket di WebKit .


Ini membuat hidup jadi lebih mudah, satu-satunya masalah adalah lengket tidak didukung di Internet Explorer atau Edge 15 dan versi yang lebih lama.
ricks

1
position:stickybagus. Didukung oleh semua browser kecuali IE caniuse.com/#feat=css-sticky
Yarin

lol, api yang sangat tua, dan Anda menghemat hari saya ... saya menggunakannya untuk kolom tetap untuk tabel fleksibel.
Vladislav Gritsenko

1
"dalam induknya" - apakah mungkin untuk tetap elemen lengket di atas, baik jika induk digulir ke atas menjadi tidak terlihat?
Fikret

27

SOLUSI 2019: Anda dapat menggunakan position: stickyproperti.

Berikut adalah contoh CODEPEN yang menunjukkan penggunaan dan juga bagaimana perbedaannya position: fixed.

Bagaimana perilakunya dijelaskan di bawah ini:

  1. Elemen dengan posisi lengket diposisikan berdasarkan posisi gulir pengguna. Ini pada dasarnya bertindak seperti position: relativesampai elemen digulir di luar offset tertentu, dalam hal ini berubah menjadi posisi: diperbaiki. Ketika digulir kembali itu akan kembali ke posisi (relatif) sebelumnya.

  2. Ini efek aliran elemen lain di halaman yaitu menempati ruang tertentu di halaman (sama seperti position: relative).

  3. Jika itu didefinisikan di dalam beberapa wadah, itu diposisikan sehubungan dengan wadah itu. Jika wadah mengalami overflow (gulir), tergantung pada gulir offset itu berubah menjadi posisi: diperbaiki.

Jadi, jika Anda ingin mencapai fungsi tetap tetapi di dalam wadah, gunakan sticky.


Solusi yang bagus. Saya belum tahu tentang position: stickyitu. Banyak membantu, terima kasih!
dave0688

Saya baru saja memposting ini. Jawaban yang bagus! lengket adalah jalannya.
dkellner

Jika Anda meningkatkan ukuran jendela output di Codepen, elemen tetap tidak diperbaiki tetapi bergerak ke atas. Tidak baik. Solusi yang lebih baik membuatnya tetap tertanam di bagian bawah viewport.
AndroidDev

@AndroidDev Hanya elemen atas yang ditetapkan untuk diperbaiki untuk seluruh halaman. Itu sedang dibuat seperti yang diinginkan. Elemen lainnya adalah contoh penjelasan untuk kasus yang berbeda.
Pransh Tiwari

18

Ambil saja gaya atas dan kiri dari posisi tetap. Ini sebuah contoh

<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> 

Div #content akan diletakkan di mana pun div induk berada, tetapi akan diperbaiki di sana.


3
Kenapa minusnya? Ini berfungsi sempurna untuk memperbaiki elemen di mana pun Anda inginkan dalam aliran DOM. deadlykitten.com/tests/fixedPositionTest.php
hobberwickey

18

Saya telah membuat plugin jQuery ini untuk menyelesaikan masalah serupa yang saya alami di mana saya memiliki wadah terpusat (data tabular), dan saya ingin header untuk memperbaiki ke bagian atas halaman ketika daftar digulir, namun saya ingin itu berlabuh ke data tabular sehingga akan berada di mana pun saya meletakkan wadah (tengah, kiri, kanan) dan juga memungkinkannya bergerak ke kiri dan kanan dengan halaman saat digulir secara horizontal.

Berikut ini tautan ke plugin jQuery ini yang dapat mengatasi masalah ini:

https://github.com/bigspotteddog/ScrollToFixed

Deskripsi plugin ini adalah sebagai berikut:

Plugin ini digunakan untuk memperbaiki elemen ke bagian atas halaman, jika elemen tersebut akan digeser keluar dari pandangan, secara vertikal; Namun, itu memungkinkan elemen untuk terus bergerak ke kiri atau ke kanan dengan gulir horizontal.

Diberikan marginTop pilihan, elemen akan berhenti bergerak vertikal ke atas setelah gulir vertikal telah mencapai posisi target; tetapi, elemen masih akan bergerak secara horizontal saat halaman digulir ke kiri atau kanan. Setelah halaman digulirkan kembali melewati posisi target, elemen akan dikembalikan ke posisi semula di halaman.

Plugin ini telah diuji di Firefox 3/4, Google Chrome 10/11, Safari 5, dan Internet Explorer 8/9.

Penggunaan untuk kasus khusus Anda:

<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();
});

12

Saya harus melakukan ini dengan iklan yang klien saya ingin duduk di luar area konten. Saya hanya melakukan yang berikut dan itu bekerja seperti pesona!

<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>

Iklan saya lebar 140px, jadi saya memindahkannya 150px ke kiri untuk memberikan sedikit margin kanan di tepi bingkai situs web.
Eric K

7

Dua elemen HTML dan CSS murni (browser modern)

Lihat contoh jsFiddle ini.Ubah ukuran dan lihat bagaimana elemen-elemen tetap bergerak dengan elemen-elemen terapung yang ada di dalamnya. Gunakan bilah gulir paling dalam untuk melihat bagaimana gulir akan bekerja di sebuah situs (elemen-elemen tetap tetap diperbaiki).

Seperti banyak orang di sini telah menyatakan, salah satu kunci tidak menetapkan pengaturan posisi pada fixedelemen (tidak ada top, right, bottom, atau leftnilai-nilai).

Sebaliknya, kami menempatkan semua elemen tetap (perhatikan bagaimana kotak terakhir memiliki empat dari mereka) pertama di dalam kotak yang harus diposisikan, seperti:

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

Lalu kami menggunakan margin-topdan margin-left"memindahkan" mereka terkait dengan wadahnya, seperti yang dilakukan CSS ini:

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

Perhatikan bahwa karena fixedelemen mengabaikan semua elemen tata letak lainnya, wadah terakhir di biola kami dapat memiliki beberapa fixedelemen, dan masih memiliki semua elemen yang terkait dengan sudut kiri atas. Tapi ini hanya benar jika mereka semua ditempatkan pertama kali dalam wadah, karena biola perbandingan ini menunjukkan bahwa jika tersebar dalam konten wadah, penentuan posisi menjadi tidak dapat diandalkan .

Apakah bungkusnya statis , relatif , atau absolut dalam penentuan posisi, itu tidak masalah.


3

Anda dapat mencoba plugin jQuery saya, FixTo .

Pemakaian:

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

2

Solusi aneh lain untuk mencapai posisi tetap relatif adalah mengubah wadah Anda menjadi iframe, sehingga elemen tetap Anda dapat diperbaiki ke viewport wadahnya dan bukan seluruh halaman.


2

Dengan CSS murni Anda tidak dapat mengaturnya; setidaknya saya belum. Namun Anda dapat melakukannya dengan jQuery dengan sangat sederhana. Saya akan menjelaskan masalah saya, dan dengan sedikit perubahan Anda dapat menggunakannya.

Jadi sebagai permulaan, saya ingin elemen saya memiliki top tetap (dari atas jendela), dan komponen kiri mewarisi dari elemen induk (karena elemen induk berpusat). Untuk mengatur komponen kiri, cukup masukkan elemen Anda ke dalam induk dan aturposition:relative untuk elemen induk.

Maka Anda perlu tahu berapa banyak dari atas elemen Anda saat bilah gulir ada di atas (y nol digulir); ada dua opsi lagi. Pertama adalah statis (beberapa angka) atau Anda harus membacanya dari elemen induk.

Dalam kasus saya ini 150 piksel dari statis atas. Jadi ketika Anda melihat 150 berapa elemen dari atas ketika kita belum menggulir.

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');
});

Masalahnya adalah bahwa div dalam pertanyaan berkedip saat bergulir.
vvohra87

Mungkin karena menggulir menyegarkan terlalu banyak atau terlalu cepat. Saya tidak memiliki masalah itu tbh, tetapi saya dapat menyarankan Anda mencoba menggunakan global "blocker" yang akan di-refresh misalnya setiap 10 ms atau waktu tertentu, dan atur untuk memblokir nilai setiap kali Anda melakukan perubahan ketinggian. Tentu saja Anda harus menambahkan jika kondisi ke. Gulir acara yang memeriksa jika dalam periode ini (10 ms) Anda sudah menggulir div. Saya ulangi saya belum mencoba tetapi saya percaya itu bisa berhasil :) Dengan cara ini Anda dapat berhenti div dari mengubah posisinya terlalu banyak sehingga komputer tidak dapat benar-benar mengikuti, dan cukup banyak mata manusia yang melihatnya.
Tn. Br

Saya sudah memberikan jawaban Anda kepada pasangan +1;) Rasa sakit dengan melampirkan metode perulangan global benar-benar kinerja. Untuk mendapatkan sesuatu seperti itu berfungsi baik di PC lama dan tablet itu menyakitkan. Sering kali seorang junior dev di kantor menulis 'var x' di dalam metode seperti itu yang mengakibatkan kebocoran memori yang tidak perlu jika halaman dibiarkan terbuka terlalu lama: P Tapi ya saran Anda sepertinya satu-satunya pilihan nyata .
vvohra87

Anda mendapat poin dengan loop global; itu tidak baik, saya setuju. Saya hanya suka berpikir tentang masalah seperti ini, itu sebabnya saya menulis saran lain :) Tbh, sekarang terlihat sedikit lebih baik, saya akan menghindarinya xD Saya mendapat solusi lain sekarang. Apa yang Anda katakan tentang pengaturan setTimeout () pada acara gulir yang memanggil func. yang membuat pergerakan div..juga Anda menggunakan pemblokir global yang disetel ke true sambil menunggu batas waktu dan ketika batas waktu dipanggil Anda mengembalikan pemblokir ke false yang memungkinkan panggilan lain setelah beberapa waktu ... dengan cara ini Anda tidak akan menggunakan loop global tetapi masih memiliki kontrol pada frekuensi gerakan div.
Tn. Br

Ini lebih elegan tetapi saya merasa sulit untuk menerimanya. Ini adalah hal yang saya harapkan spesifikasi html dan css untuk menangani tbh. Benci fakta bahwa js terlibat sejak awal!
vvohra87

1

Ini mudah (sesuai HTML di bawah)

Triknya adalah untuk TIDAK menggunakan atas atau kiri pada elemen (div) dengan "position: fix;". Jika ini tidak ditentukan, elemen "konten tetap" akan muncul RELATIF ke elemen terlampir (div dengan "posisi: relatif;") BUKAN DARI relatif ke jendela browser !!!

<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>

Di atas memungkinkan saya menemukan tombol "X" penutup di bagian atas banyak teks dalam div dengan pengguliran vertikal. "X" berada di tempatnya (tidak bergerak dengan teks yang digulir, namun bergerak ke kiri atau ke kanan dengan wadah div penutup ketika pengguna mengubah ukuran lebar jendela browser! Dengan demikian "diperbaiki" secara vertikal, tetapi diposisikan relatif terhadap elemen penutup secara horizontal!

Sebelum saya mulai bekerja, "X" digulir ke atas dan tidak terlihat ketika saya menggulirkan konten teks ke bawah.

Permintaan maaf karena tidak menyediakan fungsi javascript hideDiv () saya, tetapi akan membuat posting ini lebih lama tidak perlu. Saya memilih untuk menyimpannya sesingkat mungkin.


Solusi cross-browser yang solid, bekerja di IE8 seperti pesona.
dmi3y

1

Saya membuat jsfiddle untuk mendemonstrasikan cara kerjanya menggunakan transformasi.

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/


1

Saya memiliki masalah yang sama, salah satu anggota tim kami memberi saya solusi. Untuk mengizinkan posisi fix div dan relatif ke div lainnya, solusi kami adalah menggunakan wadah ayah bungkus div fix dan gulir div.

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

css

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

.fix {
  prosition:absolute;
}

1
/* 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%);
}


0

Saya melakukan sesuatu seperti itu beberapa waktu lalu. Saya cukup baru dalam JavaScript, jadi saya yakin Anda dapat melakukan lebih baik, tetapi ini adalah titik awalnya:

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)
}

Anda perlu mengatur lebar Anda, dan kemudian mendapatkan lebar jendela dan mengubah margin setiap beberapa detik. Saya tahu ini berat, tetapi berhasil.


satu masalah yang bisa saya lihat dengan pendekatan ini adalah bahwa ia bergantung pada timer (2,5 detik) dan selama waktu itu, jika pengguna mengubah ukuran jendela, itu akan memakan waktu hingga itu untuk memperbaikinya sendiri. Itu bukan hal terbaik dalam hal pengalaman pengguna. Selain itu, jika dapat dibantu, coba gunakan pendengar acara alih-alih penghitung waktu.
Joseph Marikle

Seperti saya katakan itu script LAMA, salah satu yang pertama, dan tidak perlu kembali memperbaikinya. Jadi ini bukan yang terbaik, tetapi ini bisa menjadi titik awal yang baik.
webLacky3rdClass


0

Proyek saya adalah .NET ASP Core 2 MVC Angular 4 template dengan Bootstrap 4. Menambahkan "sticky-top" ke dalam html komponen aplikasi utama (yaitu app.component.html) pada baris pertama berfungsi, sebagai berikut:

<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>

Apakah itu konvensi atau apakah saya terlalu menyederhanakan ini?


0

Ketika Anda menggunakan position:fixedaturan CSS dan mencoba menerapkan top/ left/ right/ bottomposisikan elemen relatif ke jendela.

Solusinya adalah menggunakan marginproperti alih-alih top/ left/ right/bottom


-1

Periksa ini:

<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>

5
Saya tidak berpikir ini menyelesaikan apa yang ditanyakan OP.
JasonWyatt
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.