Menghentikan pengguliran posisi tetap pada titik tertentu?

94

Saya memiliki elemen yaitu posisi: tetap dan gulungan dengan halaman bagaimana saya menginginkannya. ketika pengguna menggulir ke atas Saya ingin elemen berhenti menggulir pada titik tertentu, katakan ketika 250px dari atas halaman, apakah ini mungkin? Bantuan atau saran apa pun akan sangat membantu, terima kasih!

Saya merasa bahwa saya perlu menggunakan jquery untuk melakukannya. Saya mencoba mendapatkan scrolling atau lokasi di mana pengguna berada tetapi benar-benar bingung, apakah ada solusi jquery?

jquery  css  positioning 
— Louise McComiskey
sumber
1
Sejauh yang saya tahu, hanya solusi berbasis javascript yang akan melakukan apa yang Anda inginkan. Tidak ada solusi CSS murni yang melakukan itu.
— cdeszaq

Jawaban:

124

Berikut adalah plugin jQuery cepat yang baru saja saya tulis yang dapat melakukan apa yang Anda butuhkan:

$.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);

Lihat contoh kerja →

— mVChr
sumber
Ini terlihat menjanjikan ya itu apa yang saya pikir mengubah posisi pada titik-titik tertentu, saya beri tahu Anda bagaimana saya melanjutkannya, terima kasih!
— Louise McComiskey
1
Hai ya terima kasih banyak ini dengan beberapa tweeks persis seperti yang saya inginkan dan sekarang bekerja dengan sempurna terima kasih lagi.
— Louise McComiskey
3
$('window')tidak boleh dalam tanda kutip. Tapi terima kasih untuk ini, itu sangat membantu.
— jeff
137

Apakah yang Anda maksud seperti ini?

http://jsfiddle.net/b43hj/

$(window).scroll(function(){
    $("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});

Tampilkan cuplikan kode

— James Montagne
sumber
Hebat, terima kasih banyak! Meskipun tugas saya adalah membuat tombol "Ke atas" yang akan selalu berada di atas footer, saya sedikit memodifikasi kode ini. Lihat versi saya di sini (js coffee): jsfiddle.net/9vnwx3fa/2
— Alb
@ James Montagne - Apa yang akan menjadi solusi untuk membalikkan kode ini jika saya ingin elemen tetap lengket di bawah: 0; pada gulir dan kemudian hentikan 250px sebelum sampai ke bagian bawah halaman?
— BoneStarr
1
@BoneStarr itu sedikit lebih kompleks. Anda perlu membandingkan scrollTop saat ini dengan tinggi halaman dan viewport. Kemudian Anda cukup menggunakan kode yang sama di atas, kecuali dengan bottomdan nilai yang dihitung ini (diimbangi dengan 250) secara maksimal.
— James Montagne
@JamesMontagne - Adakah kesempatan Anda bisa menguraikan biola ini? Akan sangat menghargainya karena saya terjebak dengan yang satu ini. jsfiddle.net/Hf5wH/137
— BoneStarr
1
@bonestarr Jauh lebih rumit dari yang ini. Anda harus mengembangkannya menjadi beberapa baris kode atau sangat sulit untuk dipahami. jsfiddle.net/Hf5wH/139
— James Montagne
19

Berikut adalah plugin jquery lengkap yang memecahkan masalah ini:

https://github.com/bigspotteddog/ScrollToFixed

Deskripsi dari plugin ini adalah sebagai berikut:

Plugin ini digunakan untuk memperbaiki elemen ke bagian atas halaman, jika elemen akan digulir keluar dari tampilan, secara vertikal; Namun, ini memungkinkan elemen untuk terus bergerak ke kiri atau kanan dengan scroll horizontal.

Dengan opsi marginTop, elemen akan berhenti bergerak ke atas secara vertikal setelah scroll vertikal mencapai posisi target; tetapi, elemen akan tetap bergerak horizontal saat halaman di-scroll ke kiri atau kanan. Setelah halaman digulir kembali melewati posisi target, elemen tersebut akan dikembalikan ke posisi semula pada 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({ marginTop: 250 });
});
— bigspotteddog
sumber
1
Terima kasih ya ini terlihat sangat berguna, saya menggunakan jawaban sebelumnya karena proyek ini dilakukan beberapa bulan yang lalu namun saya pasti akan mengingatnya untuk proyek-proyek mendatang, ini terlihat lebih mudah, Terima kasih :)
— Louise McComiskey
6

Anda dapat melakukan apa yang dilakukan James Montagne dengan kodenya di jawabannya, tetapi itu akan membuatnya berkedip di Chrome (diuji di V19).

Anda dapat memperbaikinya jika Anda meletakkan "margin-top" daripada "top". Tidak begitu tahu mengapa ini bekerja dengan margin tho.

$(window).scroll(function(){
    $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});

http://jsbin.com/idacel

— Jure Ravlić
sumber
Ini berfungsi dengan baik untuk elemen tetap di bawah teks juga, saya telah mengalami masalah serius dengan tampilan layar kecil, dan elemen gulir tetap saya berjalan ke atas browser di area yang lebih kecil seperti 1024x768. Ini menyelesaikan masalah itu.
— Joshua
2

solusi saya 

$(window).scroll(function(){
        if($(this).scrollTop()>425) {
            $("#theRelative").css("margin-top",$(this).scrollTop()-425);
            }   else {
                $("#theRelative").css("margin-top",$(this).scrollTop()-0);
                }
            });
            });
— pengguna3288218
sumber
2

Dalam sebuah proyek, saya sebenarnya memiliki beberapa heading yang diperbaiki ke bagian bawah layar saat pemuatan halaman (ini adalah aplikasi menggambar sehingga judulnya ada di bagian bawah untuk memberikan ruang maksimum ke elemen kanvas pada viewport lebar).

Saya membutuhkan heading untuk menjadi 'absolute' ketika mencapai footer pada scroll, karena saya tidak ingin heading di atas footer (warna heading sama dengan warna background footer).

Saya mengambil tanggapan terlama di sini (diedit oleh Gearge Millo) dan potongan kode itu berfungsi untuk kasus penggunaan saya. Dengan beberapa bermain-main saya mendapatkan ini bekerja. Sekarang heading tetap berada dengan indah di atas footer setelah mencapai footer.

Hanya berpikir saya akan membagikan kasus penggunaan saya dan cara kerjanya, dan mengucapkan terima kasih! Aplikasi: 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);
    }
— joseph falconer
sumber
1

Saya menulis posting blog tentang ini yang menampilkan fungsi ini:

$.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();
  });
};
— Nathan McGinness
sumber
0

Solusi menggunakan Kerangka Mootools.

http://mootools.net/docs/more/Fx/Fx.Scroll

  1. Dapatkan Posisi (x & y) elemen di mana Anda ingin menghentikan scroll menggunakan $ ('myElement'). GetPosition (). X

    $ ('myElement'). getPosition (). y

  2. Untuk jenis animasi penggunaan gulir:

    new Fx.Scroll ('scrollDivId', {offset: {x: 24, y: 432}}). toTop ();

  3. Untuk langsung mengatur gulir gunakan:

    new Fx.Scroll (myElement) .set (x, y);

Semoga ini membantu !! : D

— Zohaib
sumber
0

Saya menyukai solusi ini 

$(window).scroll(function(){
    $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});

masalah saya adalah bahwa saya harus berurusan dengan wadah posisi relatif di Adobe Muse.

Solusi saya:

$(window).scroll(function(){
    if($(this).scrollTop()>425) {
         $("#theRelative").css("margin-top",$(this).scrollTop()-425);
    }
});
— leu
sumber
0

Hanya kode mVChr improvisasi

$(".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);
— Sreeraj
sumber
Alasan untuk menyimpan $(this)dan $(window)memasukkan variabel adalah agar Anda hanya perlu melakukan $this.height()dan seterusnya. Alih-alih mengatur posisi teratas, bukankah lebih baik jika plugin menyimpan nilai atas asli dan kembali ke nilai tersebut saat menyetel lebar tetap? Juga, apa maksudmu dengan Just improvised mVChr code?
— Cyclonecode
0

Saya mengadaptasi jawaban @ mVchr dan membalikkannya untuk digunakan untuk pemosisian iklan melekat: jika Anda membutuhkannya benar-benar diposisikan (bergulir) hingga sampah header keluar dari layar tetapi kemudian membutuhkannya untuk tetap terpaku / terlihat di layar setelah itu:

$.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;
}
— cbmtrx.dll
sumber
0

Saya suka jawaban @james tetapi saya mencari kebalikannya yaitu hentikan posisi tetap tepat sebelum footer, inilah yang saya dapatkan

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

Jadi sekarang elemen tetap akan berhenti tepat sebelum footer. dan tidak akan tumpang tindih dengannya.

— mshahbazm.dll
sumber
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.