I'm trying to create an effect - when the user scrolls the page, the h1 header sticks to the top of the window.

When the parent div scrolled, h1 then released and scrolls again as usual.

When the next section appears, I would like to pin the next h1 at the top of the window again, and so on.

Example: fiddle

jQuery

 $(document).ready(function(){ $(window).scroll(function(){ $('section h1').addClass('fixed'); }) })

I also tried:

 var section = $('section'); distance = section.offset().top, $window = $(window); $window.scroll(function() { if ( $window.scrollTop() >= distance ) { section.find('h1').addClass('fixed'); } });

Translation of the question: Fix title to top when section is visible @Liam

2 answers 2

It takes position: sticky and a polyfill to it.

Demo .

 section { position: relative; } h1 { position: sticky; margin-bottom: 0; top: 0; background: #fff; border-bottom: 1px solid; } h1 + p { margin-top: 2em; } 
 <section> <h1>Header</h1> <p>On teada-tuntud fakt, et lehe kujunduse vaatamisel juhib selle loetav sisu lugeja tähelepanu kõrvale. Lorem Ipsumi kasutamise mõte seisneb selles, et sellel on enam-vähem normaalne jaotus tähti, mitte nagu korduvatel sõnadel "sisu siin, sisu siin", nähes välja nagu tavaline loetav tekst. Paljud tekstiredaktorid ja veebilehtede valmistamise programmid kasutavad Lorem Ipsumit vaikimisi mudeltekstina, ja trükkides otsingusse "lorem ipsum" võib leida veebilehti, mida ei ole veel nende õige sisuga täidetud. Aastatega on tekkinud mitmeid versioone, mõnikord kogemata, mõnikord meelega (huumori sisestamisega jne).</p> </section> <section> <h1>Header</h1> <p>On teada-tuntud fakt, et lehe kujunduse vaatamisel juhib selle loetav sisu lugeja tähelepanu kõrvale. Lorem Ipsumi kasutamise mõte seisneb selles, et sellel on enam-vähem normaalne jaotus tähti, mitte nagu korduvatel sõnadel "sisu siin, sisu siin", nähes välja nagu tavaline loetav tekst. Paljud tekstiredaktorid ja veebilehtede valmistamise programmid kasutavad Lorem Ipsumit vaikimisi mudeltekstina, ja trükkides otsingusse "lorem ipsum" võib leida veebilehti, mida ei ole veel nende õige sisuga täidetud. Aastatega on tekkinud mitmeid versioone, mõnikord kogemata, mõnikord meelega (huumori sisestamisega jne).</p> </section> <section> <h1>Header</h1> <p>On teada-tuntud fakt, et lehe kujunduse vaatamisel juhib selle loetav sisu lugeja tähelepanu kõrvale. Lorem Ipsumi kasutamise mõte seisneb selles, et sellel on enam-vähem normaalne jaotus tähti, mitte nagu korduvatel sõnadel "sisu siin, sisu siin", nähes välja nagu tavaline loetav tekst. Paljud tekstiredaktorid ja veebilehtede valmistamise programmid kasutavad Lorem Ipsumit vaikimisi mudeltekstina, ja trükkides otsingusse "lorem ipsum" võib leida veebilehti, mida ei ole veel nende õige sisuga täidetud. Aastatega on tekkinud mitmeid versioone, mõnikord kogemata, mõnikord meelega (huumori sisestamisega jne).</p> </section> <section> <h1>Header</h1> <p>On teada-tuntud fakt, et lehe kujunduse vaatamisel juhib selle loetav sisu lugeja tähelepanu kõrvale. Lorem Ipsumi kasutamise mõte seisneb selles, et sellel on enam-vähem normaalne jaotus tähti, mitte nagu korduvatel sõnadel "sisu siin, sisu siin", nähes välja nagu tavaline loetav tekst. Paljud tekstiredaktorid ja veebilehtede valmistamise programmid kasutavad Lorem Ipsumit vaikimisi mudeltekstina, ja trükkides otsingusse "lorem ipsum" võib leida veebilehti, mida ei ole veel nende õige sisuga täidetud. Aastatega on tekkinud mitmeid versioone, mõnikord kogemata, mõnikord meelega (huumori sisestamisega jne).</p> </section> <section> <h1>Header</h1> <p>On teada-tuntud fakt, et lehe kujunduse vaatamisel juhib selle loetav sisu lugeja tähelepanu kõrvale. Lorem Ipsumi kasutamise mõte seisneb selles, et sellel on enam-vähem normaalne jaotus tähti, mitte nagu korduvatel sõnadel "sisu siin, sisu siin", nähes välja nagu tavaline loetav tekst. Paljud tekstiredaktorid ja veebilehtede valmistamise programmid kasutavad Lorem Ipsumit vaikimisi mudeltekstina, ja trükkides otsingusse "lorem ipsum" võib leida veebilehti, mida ei ole veel nende õige sisuga täidetud. Aastatega on tekkinud mitmeid versioone, mõnikord kogemata, mõnikord meelega (huumori sisestamisega jne).</p> </section>

  • 2
    Added with polyfill and -webkit-sticky for ios. - Sasha Omelchenko
  • so much h1 on one page;), but the answer is super - HamSter
  • one
    @Alexandr_T in chrome everything is fine, yeah. - Sasha Omelchenko
  • one
    @HamSter just fulfilling the task conditions) - Sasha Omelchenko
  • one
    @Alexandr_T, I, if anything, everything is OK in chrome - HamSter

You can do this using a little jQuery

The following fragment calculates the offset each section at the top of the window.

When a partition hits the top of a window, its h1 header changes to the position: fixed; .

Demo

jQuery:

 function fixTitle() { $('section.affix').each(function () { var $this = $(this); var offset = $this.offset().top-40; var scrollTop = $(window).scrollTop(); if (scrollTop > offset) { $this.addClass('fixed'); } else { $this.removeClass('fixed'); } }); } $(document).ready(function () { $(window).scroll(fixTitle);

CSS:

 section { overflow:hidden; padding:0 20%; position:relative; text-align:justify; } section h1 { float:left; width:14%; padding-left:1.5%; line-height:40px; background:#fff; position:relative; z-index:1; } section .summary { float:right; width:70%; } .fixed h1:first-child { position:fixed; top:0; } h1:first-child:before{ content:""; position:absolute; left:0; width:5%; height:100%; background-color:#4381B6; z-index:-1; } .fixed h1:first-child:before{ width:100%; -webkit-transition:width 0.5s ease-in-out; transition: width 0.5s ease-in-out; }

Translation answer: Fix title to top when section is visible @ web-tiki