Menggunakan posisi CSS "posisi: fixed" memungkinkan blok div untuk diperbaiki dalam posisi tetap, dan posisinya tidak akan diubah bahkan jika ada bilah gulir. Posisi: Tetap telah membawa efek luar biasa bagi banyak pengembang, tetapi ketika bilah gulir horizontal muncul, efeknya tidak begitu mudah diterima. Kadang -kadang kami berharap bahwa ketika bilah gulir horizontal muncul, blok div dapat bergerak ke kiri dan kanan dengan bilah gulir, mencapai posisi tetap vertikal (tetap) dan penentuan posisi relatif horizontal (absolut). Artikel ini memberikan solusi, dengan kode sumber ekstensi jQuery.
Metode implementasi artikel ini adalah menggunakan JS untuk mengontrol blok div untuk menggulir secara horizontal dengan bilah gulir waktu. Posisi: Modifikasi Gaya Tetap Saat Blok Div diperlukan.
Ketika blok div diperbaiki secara horizontal relatif ke sisi kanan browser, maka ketika peristiwa gulir atau pengubah ukuran terjadi di objek jendela, nilai gaya kanannya diperbarui, dan nilainya harus:
Salinan kode adalah sebagai berikut:
var new_right = ($ (window) .scrollleft () + $ (window) .width () - $ (dokumen) .width () + original_right) + 'px'
Ketika blok div ditetapkan dalam arah horizontal relatif ke sisi kiri browser, kemudian ketika peristiwa gulir atau ukuran terjadi di objek jendela, nilai gaya kiri diperbarui, dan nilainya harus:
Salinan kode adalah sebagai berikut:
var new_left = (original_left - $ (window) .scrollleft ()) + 'px'
The Original_Left dan original_right muncul dalam kode di atas adalah nilai kiri dan kanan dari blok div asli. Kode ekstensi jQuery lengkap adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
(function ($) {
$ .Scrollfixed = function (EL, opsi) {
var base = ini;
basis. $ el = $ (el);
base.el = el;
var target = base. $ el;
var original_left = parseInt (target.css ('left'));
var original_right = parseInt (target.css ('right'));
var _fix_position = function () {
if (base.options.fixed == 'right') {
target.css ('right', ($ (window) .scrollleft () + $ (window) .width () - $ (dokumen) .width () + original_right) + 'px');
} lain if (base.options.fixed == 'left') {
target.css ('left', (original_left - $ (window) .scrollleft ()) + 'px');
}
};
var windowresize = function () {
_fix_position ();
};
var windowscroll = function () {
_fix_position ();
};
base.init = function () {
base.options = $ .extend ({}, $ .scrollfixed.defaultOptions, opsi);
$ (window) .resize (windowResize);
$ (window) .scroll (windowscroll);
_fix_position ();
console.log (base.options.fixed);
};
base.init ();
};
$ .Scrollfixed.defaultOptions = {
diperbaiki: 'kiri'
};
$ .fn.scrollfixed = function (opsi) {
kembalikan this.each (function () {
(baru $ .scrollfixed (ini, opsi));
});
};
}) (jQuery);
Contoh Penggunaan:
Salinan kode adalah sebagai berikut:
$ ('#leftsider'). ScrollFixed ({fixed: 'left'});
$ ('#Hak Hak'). Gulir ({tetap: 'benar'});