修复了标题CSS - 仅限电子邮件注册表单

Question

我试图在用户开始向下滚动时将电子邮件注册表单固定在顶部 - 请参阅下面的图片。

我理解如何制作固定标题，但我只希望修复表单。

目前我使用这种风格在DIV中包装注册表单：

width: 100%;
position: fixed;
top: 100px;
z-index: 101;

但它并没有将内容推下来当我开始滚动时，表格仍然比VIEWPOINT顶部低100px ...我该怎么做

没有固定的HEADER CSS

WITH FIXED HEADER CSS

注意表单是如何100px向下的 - 我希望它一直在VIEWPOINT的顶部，滚动后

感谢您的帮助。

Answer 1

如果我理解正确，您可以通过使用jquery.scroll检查页面上的当前滚动位置来实现此目的。

知道这一点，您可以在表单容器上切换一个类，将其修复为top：0;

HTML

<div style="height:3000px;">
   <div id="form"></div>
</div>

CSS

#form {
    position: fixed;
    top:0;
    left:150px;
    width:550px;
    height:100px;
    background-color:tomato;
    transition: all 0.5s ease;
}

.offset{top:100px !important;}

JS

$(window).scroll(function () {
    var position = $(this).scrollTop();
    if (position > 100) {
      $('#form').addClass('offset');
    } else {
      $('#form').removeClass('offset');
    }
});

这是小提琴中的样子。

http://jsfiddle.net/9wa25far/