Hedefleme konumu: şu anda "takılı" durumda olan yapışkan öğeler

konum: yapışkan şu anda bazı mobil tarayıcılarda çalışıyor, böylece bir menü çubuğunu sayfada kaydırabilir, ancak daha sonra kullanıcı sayfayı kaydırdığında görüntü alanının üst kısmına bağlı kalabilirsiniz.

Peki ya yapışkan menü çubuğunuzu şu anda 'yapışma' halindeyken biraz yeniden biçimlendirmek istiyorsanız? Örneğin, sayfa ile kaydırıldığında çubuğun yuvarlatılmış köşelere sahip olmasını isteyebilirsiniz, ancak daha sonra görüntü alanının üstüne yapışır yapışmaz, üstteki yuvarlatılmış köşelerden kurtulmak ve altına küçük bir gölge eklemek isteyebilirsiniz. o.

Şu anda yapışan ve yapışmakta ::stuckolan öğeleri hedeflemek için herhangi bir tür sözde seçici (örneğin ) var mı? Veya tarayıcı satıcılarının boru hattında buna benzer bir şey var mı? Değilse, nereden talep edebilirim?position: sticky

NB. javascript çözümleri bunun için iyi değildir çünkü mobil cihazlarda genellikle scrollkullanıcı parmağını bıraktığında tek bir olay alırsınız , bu nedenle JS kaydırma eşiğinin tam olarak ne zaman geçtiğini bilemez.

Şu anda 'sıkışmış' olan öğeler için önerilen bir seçici yok. Postioned Düzeni modülüposition: sticky tanımlanır de benzer bir seçici söz etmez.

CSS için özellik istekleri, www tarzı posta listesine gönderilebilir . Bir :stucksözde sınıfın ::stucksözde bir öğeden daha mantıklı olduğuna inanıyorum , çünkü bu durumdayken öğelerin kendilerini hedeflemeye çalışıyorsunuz. :stuckHatta bir süre önce sözde bir sınıf tartışılıyordu ; Ana komplikasyon, işlenmiş veya hesaplanmış bir stile göre eşleştirme girişiminde bulunan önerilen herhangi bir seçicinin başına bela olan bir şeydir: döngüsel bağımlılıklar.

Bir durumunda :stucksözde sınıfı, yuvarlık en basit durumda, aşağıdaki CSS ile gerçekleşir:

:stuck { position: static; /* Or anything other than sticky/fixed */ }
:not(:stuck) { position: sticky; /* Or fixed */ }

Ve ele alınması zor olan çok sayıda uç durum olabilir.

Genellikle belirli bir düzen devletler dayalı olarak eşleşen seçiciler sahip olacağını kararlaştırılan Özgür'e , Nice , maalesef büyük sınırlamalar uygulamak için bu önemsiz olmayan bu marka var. Yakın zamanda bu soruna saf bir CSS çözümü için nefesimi tutmayacağım.

Bazı durumlarda IntersectionObserver, durum düzgün bir şekilde hizalamak yerine kök kapsayıcısının dışındaki bir veya iki piksele yapışmaya izin veriyorsa, basit bir hile yapabilir. Bu şekilde, kenarın hemen ötesine oturduğunda, gözlemci ateş eder ve biz gidip koşuyoruz.

const observer = new IntersectionObserver( 
  ([e]) => e.target.toggleAttribute('stuck', e.intersectionRatio < 1),
  {threshold: [1]}
);

observer.observe(document.querySelector('nav'));

Öğeyi kabının hemen dışına yapıştırın top: -2pxve ardından stucközniteliğiyle hedefleyin ...

nav {
  background: magenta;
  height: 80px;
  position: sticky;
  top: -2px;
}
nav[stuck] {
  box-shadow: 0 0 16px black;
}

Örnek burada: https://codepen.io/anon/pen/vqyQEK

Google Developers blogundaki biri, IntersectionObserver ile performatif JavaScript tabanlı bir çözüm bulduğunu iddia ediyor .

Buradaki ilgili kod biti:

/**
 * Sets up an intersection observer to notify when elements with the class
 * `.sticky_sentinel--top` become visible/invisible at the top of the container.
 * @param {!Element} container
 */
function observeHeaders(container) {
  const observer = new IntersectionObserver((records, observer) => {
    for (const record of records) {
      const targetInfo = record.boundingClientRect;
      const stickyTarget = record.target.parentElement.querySelector('.sticky');
      const rootBoundsInfo = record.rootBounds;

      // Started sticking.
      if (targetInfo.bottom < rootBoundsInfo.top) {
        fireEvent(true, stickyTarget);
      }

      // Stopped sticking.
      if (targetInfo.bottom >= rootBoundsInfo.top &&
          targetInfo.bottom < rootBoundsInfo.bottom) {
       fireEvent(false, stickyTarget);
      }
    }
  }, {threshold: [0], root: container});

  // Add the top sentinels to each section and attach an observer.
  const sentinels = addSentinels(container, 'sticky_sentinel--top');
  sentinels.forEach(el => observer.observe(el));
}

Kendim kopyalamadım, ama belki bu soruya takılıp kalan birine yardımcı olabilir.

Şekillendirme için js hacks kullanma hayranı değilim (yani getBoudingClientRect, kaydırma dinleme, yeniden boyutlandırma dinleme), ama şu anda sorunu bu şekilde çözüyorum. Bu çözüm, simge durumuna küçültülebilir / en üst düzeye çıkarılabilir içeriğe (<ayrıntılar>) veya iç içe kaydırmaya veya gerçekten herhangi bir eğri topuna sahip sayfalarla ilgili sorunlara sahip olacaktır. Bununla birlikte, sorunun basit olduğu zamanlar için de basit bir çözümdür.

let lowestKnownOffset: number = -1;
window.addEventListener("resize", () => lowestKnownOffset = -1);

const $Title = document.getElementById("Title");
let requestedFrame: number;
window.addEventListener("scroll", (event) => {
    if (requestedFrame) { return; }
    requestedFrame = requestAnimationFrame(() => {
        // if it's sticky to top, the offset will bottom out at its natural page offset
        if (lowestKnownOffset === -1) { lowestKnownOffset = $Title.offsetTop; }
        lowestKnownOffset = Math.min(lowestKnownOffset, $Title.offsetTop);
        // this condition assumes that $Title is the only sticky element and it sticks at top: 0px
        // if there are multiple elements, this can be updated to choose whichever one it furthest down on the page as the sticky one
        if (window.scrollY >= lowestKnownOffset) {
            $Title.classList.add("--stuck");
        } else {
            $Title.classList.remove("--stuck");
        }
        requestedFrame = undefined;
    });
})

Öğenin üzerinde bir öğeye sahip olduğunuz zaman için kompakt bir yol position:sticky. stuckCSS'de eşleştirebileceğiniz niteliği şu şekilde ayarlar header[stuck]:

HTML:

<img id="logo" ...>
<div>
  <header style="position: sticky">
    ...
  </header>
  ...
</div>

JS:

if (typeof IntersectionObserver !== 'function') {
  // sorry, IE https://caniuse.com/#feat=intersectionobserver
  return
}

new IntersectionObserver(
  function (entries, observer) {
    for (var _i = 0; _i < entries.length; _i++) {
      var stickyHeader = entries[_i].target.nextSibling
      stickyHeader.toggleAttribute('stuck', !entries[_i].isIntersecting)
    }
  },
  {}
).observe(document.getElementById('logo'))