Как фиксировать заголовок сверху, пока видна секция

#javascript #jquery #css #html5

Я пытаюсь создать эффект,- когда  пользователь прокручивает страницу, заголовок h1
прилипает к верхней части окна.    

Когда родительский div прокручен, h1 затем освобождается и снова прокручивается как
обычно.     

Когда появится следующий раздел, я хотел бы снова закрепить в верхней части окна
следующий h1 и так далее.  

Пример: fiddle   

jQuery   

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


Я также пробовал:     

var section = $('section');
distance = section.offset().top,
$window = $(window);

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


Перевод вопроса: Fix title to top when section is visible @Liam
    

Ответы

Ответ 1

Потребуется position: sticky и полифилл к нему.

Demo.



section {
  position: relative;
}

h1 {
  position: sticky;
  margin-bottom: 0;
  top: 0;
  background: #fff;
  border-bottom: 1px solid;
}

h1 + p {
  margin-top: 2em;
}

  
Header
  
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).



  
Header
  
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).



  
Header
  
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).



  
Header
  
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).



  
Header
  
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).



Ответ 2

Вы можете сделать это, используя немного jQuery   

Следующий фрагмент вычисляет offset каждого раздела в верхней части окна.    

Когда раздел попадает в верхнюю часть окна, его заголовок h1 изменяется на позицию:
fixed;.    

DEMO

jQuery:



function fixTitle() {
    $('section.affix').each(function () {
        var $this = $(this);
        var offset = $this.offset().top;
        var scrollTop = $(window).scrollTop();

        if (scrollTop > offset) {
            $this.addClass('fixed');
        } else {
            $this.removeClass('fixed');
        }
    });
}

$(document).ready(function () {
    $(window).scroll(fixTitle);
});
section {
    overflow:hidden;
    padding:0 20%;
    position:relative;
}
section h1 {
    float:left;
    width:17%;
    background:#fff;
}
section .summary {
    float:right;
    width:70%;
}
.fixed h1:first-child {
    position:fixed;
    top:0;
}
 

     
Title 1

    

        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in justo
lectus. Praesent suscipit lacus malesuada, lacinia libero sit amet, placerat justo.
Praesent aliquam dignissim tellus quis feugiat. Aenean ac varius nulla. Suspendisse
nec mauris ac ligula tempor pharetra ut ac massa. Aenean lacinia consectetur facilisis.
Proin eget velit mi. Duis metus risus, viverra ac lacus eu, vestibulum condimentum
diam. Fusce molestie nulla felis, sit amet volutpat enim elementum vel. Praesent libero
augue, scelerisque in lacus eget, malesuada vestibulum tellus. Curabitur vel nisi enim.
In congue, urna vel rhoncus accumsan, velit neque ultrices diam, at dapibus erat ante
et augue. Etiam enim tellus, accumsan a velit id, mollis tincidunt augue. Morbi ullamcorper
ipsum feugiat vestibulum egestas. Proin porta lacus id sollicitudin vulputate. Nullam
tristique neque ac velit lacinia, ut suscipit ligula accumsan.
        
Aliquam porttitor id erat et tempus. Aliquam interdum quis lacus ac mollis.
Nullam sit amet rutrum leo, vitae fringilla quam. Praesent at lacus et est cursus dictum
sed ut elit. Suspendisse sed hendrerit arcu, vel consequat tellus. Cras in tellus commodo,
ultricies velit ac, euismod dolor. Donec sollicitudin nisi sit amet augue porta interdum.
Vestibulum pulvinar, nisl vel condimentum auctor, nisl dolor laoreet lorem, eget laoreet
nunc eros a velit. Cras fermentum ipsum id posuere dignissim.
        
Donec vehicula justo sit amet dui euismod dapibus. Sed nulla lacus, lacinia
id placerat at, eleifend id libero. Nam gravida neque eu tellus euismod, a consectetur
ante interdum. In hac habitasse platea dictumst. In hac habitasse platea dictumst.
Sed ut felis at orci tristique mollis. Donec quis tristique urna. Nunc vitae tristique
quam. Cras non urna molestie, aliquam nunc sit amet, venenatis dolor.
        
Donec nisi enim, lacinia id molestie non, pharetra vel sapien. Duis egestas
fringilla ipsum eget iaculis. Integer ultrices accumsan nunc, eget viverra lectus congue
eget. Etiam pharetra dolor eget neque accumsan, vel vestibulum ante condimentum. Duis
a risus ac turpis mattis mollis vel vitae libero. Proin viverra lectus ut interdum
elementum. Nulla ornare ante lobortis purus faucibus iaculis. Duis tempus pharetra
tristique.
        
In imperdiet ligula eget ligula interdum, eget dictum felis porta. Quisque
eu tellus non mi dignissim aliquet. Suspendisse mollis lobortis quam, eu ultrices lectus
bibendum eu. Sed at urna nec arcu vulputate lobortis. Sed quis semper ante. Morbi tincidunt
felis risus, sed venenatis massa pharetra id. Praesent aliquam scelerisque interdum.
Proin libero mi, accumsan lobortis semper vel, tincidunt at nisl. Aliquam erat volutpat.
    


     
Title 2

    

        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in justo
lectus. Praesent suscipit lacus malesuada, lacinia libero sit amet, placerat justo.
Praesent aliquam dignissim tellus quis feugiat. Aenean ac varius nulla. Suspendisse
nec mauris ac ligula tempor pharetra ut ac massa. Aenean lacinia consectetur facilisis.
Proin eget velit mi. Duis metus risus, viverra ac lacus eu, vestibulum condimentum
diam. Fusce molestie nulla felis, sit amet volutpat enim elementum vel. Praesent libero
augue, scelerisque in lacus eget, malesuada vestibulum tellus. Curabitur vel nisi enim.
In congue, urna vel rhoncus accumsan, velit neque ultrices diam, at dapibus erat ante
et augue. Etiam enim tellus, accumsan a velit id, mollis tincidunt augue. Morbi ullamcorper
ipsum feugiat vestibulum egestas. Proin porta lacus id sollicitudin vulputate. Nullam
tristique neque ac velit lacinia, ut suscipit ligula accumsan.
        
Aliquam porttitor id erat et tempus. Aliquam interdum quis lacus ac mollis.
Nullam sit amet rutrum leo, vitae fringilla quam. Praesent at lacus et est cursus dictum
sed ut elit. Suspendisse sed hendrerit arcu, vel consequat tellus. Cras in tellus commodo,
ultricies velit ac, euismod dolor. Donec sollicitudin nisi sit amet augue porta interdum.
Vestibulum pulvinar, nisl vel condimentum auctor, nisl dolor laoreet lorem, eget laoreet
nunc eros a velit. Cras fermentum ipsum id posuere dignissim.
        
Donec vehicula justo sit amet dui euismod dapibus. Sed nulla lacus, lacinia
id placerat at, eleifend id libero. Nam gravida neque eu tellus euismod, a consectetur
ante interdum. In hac habitasse platea dictumst. In hac habitasse platea dictumst.
Sed ut felis at orci tristique mollis. Donec quis tristique urna. Nunc vitae tristique
quam. Cras non urna molestie, aliquam nunc sit amet, venenatis dolor.
        
Donec nisi enim, lacinia id molestie non, pharetra vel sapien. Duis egestas
fringilla ipsum eget iaculis. Integer ultrices accumsan nunc, eget viverra lectus congue
eget. Etiam pharetra dolor eget neque accumsan, vel vestibulum ante condimentum. Duis
a risus ac turpis mattis mollis vel vitae libero. Proin viverra lectus ut interdum
elementum. Nulla ornare ante lobortis purus faucibus iaculis. Duis tempus pharetra
tristique.
        
In imperdiet ligula eget ligula interdum, eget dictum felis porta. Quisque
eu tellus non mi dignissim aliquet. Suspendisse mollis lobortis quam, eu ultrices lectus
bibendum eu. Sed at urna nec arcu vulputate lobortis. Sed quis semper ante. Morbi tincidunt
felis risus, sed venenatis massa pharetra id. Praesent aliquam scelerisque interdum.
Proin libero mi, accumsan lobortis semper vel, tincidunt at nisl. Aliquam erat volutpat.
    


     
Title 3

    

        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in justo
lectus. Praesent suscipit lacus malesuada, lacinia libero sit amet, placerat justo.
Praesent aliquam dignissim tellus quis feugiat. Aenean ac varius nulla. Suspendisse
nec mauris ac ligula tempor pharetra ut ac massa. Aenean lacinia consectetur facilisis.
Proin eget velit mi. Duis metus risus, viverra ac lacus eu, vestibulum condimentum
diam. Fusce molestie nulla felis, sit amet volutpat enim elementum vel. Praesent libero
augue, scelerisque in lacus eget, malesuada vestibulum tellus. Curabitur vel nisi enim.
In congue, urna vel rhoncus accumsan, velit neque ultrices diam, at dapibus erat ante
et augue. Etiam enim tellus, accumsan a velit id, mollis tincidunt augue. Morbi ullamcorper
ipsum feugiat vestibulum egestas. Proin porta lacus id sollicitudin vulputate. Nullam
tristique neque ac velit lacinia, ut suscipit ligula accumsan.
        
Aliquam porttitor id erat et tempus. Aliquam interdum quis lacus ac mollis.
Nullam sit amet rutrum leo, vitae fringilla quam. Praesent at lacus et est cursus dictum
sed ut elit. Suspendisse sed hendrerit arcu, vel consequat tellus. Cras in tellus commodo,
ultricies velit ac, euismod dolor. Donec sollicitudin nisi sit amet augue porta interdum.
Vestibulum pulvinar, nisl vel condimentum auctor, nisl dolor laoreet lorem, eget laoreet
nunc eros a velit. Cras fermentum ipsum id posuere dignissim.
        
Donec vehicula justo sit amet dui euismod dapibus. Sed nulla lacus, lacinia
id placerat at, eleifend id libero. Nam gravida neque eu tellus euismod, a consectetur
ante interdum. In hac habitasse platea dictumst. In hac habitasse platea dictumst.
Sed ut felis at orci tristique mollis. Donec quis tristique urna. Nunc vitae tristique
quam. Cras non urna molestie, aliquam nunc sit amet, venenatis dolor.
        
Donec nisi enim, lacinia id molestie non, pharetra vel sapien. Duis egestas
fringilla ipsum eget iaculis. Integer ultrices accumsan nunc, eget viverra lectus congue
eget. Etiam pharetra dolor eget neque accumsan, vel vestibulum ante condimentum. Duis
a risus ac turpis mattis mollis vel vitae libero. Proin viverra lectus ut interdum
elementum. Nulla ornare ante lobortis purus faucibus iaculis. Duis tempus pharetra
tristique.
        
In imperdiet ligula eget ligula interdum, eget dictum felis porta. Quisque
eu tellus non mi dignissim aliquet. Suspendisse mollis lobortis quam, eu ultrices lectus
bibendum eu. Sed at urna nec arcu vulputate lobortis. Sed quis semper ante. Morbi tincidunt
felis risus, sed venenatis massa pharetra id. Praesent aliquam scelerisque interdum.
Proin libero mi, accumsan lobortis semper vel, tincidunt at nisl. Aliquam erat volutpat.
    





Перевод ответа:   Fix title to top when section is visible @web-tiki