当部分可见时，将标题修正为顶部 [英] Fix title to top when section is visible

问题描述

我试图创建一个效果，当我的用户滚动时，我的 h1 粘在窗口的顶部。当父div滚动过去时，h1会被释放并再次正常滚动。当我的下一个部分进入时，我会再次将 h1 贴到顶部，依此类推。

小提琴

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'）; 
} 
}）; 
  

解决方案

您可以使用一些jQuery来做到这一点。

以下片段计算每个部分到窗口顶部的偏移量。当一个部分到达窗口的顶部时，它的标题是< h1> 位置改变为 position：fixed; 。

DEMO

$
$ b

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：

 部分{
 overflow：hidden; 
填充：0 20％; 
职位：亲属; 
 text-align：justify; 
} 
部分h1 {
 float：left; 
宽度：14％; 
 padding-left：1.5％; 
 line-height：40px; 
背景：#fff; 
职位：亲属; 
 z-index：1; 
} 
 section .summary {
 float：right; 
宽度：70％; 
} 
 .fixed h1：第一个孩子{
 position：fixed; 
 top：0; 
} 
 h1：第一个孩子：之前{
 content：; 
位置：绝对; 
剩下：0; 
宽度：5％; 
身高：100％; 
背景颜色：＃4381B6; 
 z-index：-1; 
 
 
} 
 .fixed h1：first-child：before {
 width：100％; 
 -webkit-transition：宽度0.5s缓出; 
过渡：宽度0.5s缓出; 
} 
  

Im trying to create an effect than when my user scrolls, my h1 sticks to the top of the window. When the parent div has scrolled past the h1 is then 'released' and scrolls again as normal. When my next section comes in I'd then like to stick that next h1 to the top again and so on.

Fiddle

jQuery

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

I've also tried :

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

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

解决方案

You can do this using a bit of jQuery.

The following snippet calculates the offset of each section to the top of the window. When a section hits the top of the window, it's title <h1> position is changed to 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;
}

这篇关于当部分可见时，将标题修正为顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！