Question

我一直试图制作一个标题，它会缩小您滚动的数量然后停止并且某个点。还有一个徽标会在此

中向上移动

唯一的问题是$(window).scrollTop();无法快速开火。因此，如果您滚动太快，徽标将位于标题之外，或标题可能是像素太大。

我想不出更好的方法来做这件事......任何帮助或想法都会受到赞赏

这是我的代码

var widgets = {
    header: function() {
        var $header = $('.header');
        var $logo = $('.header__title');
        var $headerHeight = $header.height();
        $(window).on('scroll resize', function(event) {
            var windowWidth = window.innerWidth;
            var windowScrollTop = $(window).scrollTop();


            if( windowScrollTop < 100) {
                $logo.css('margin-top','-'+(windowScrollTop)+'px'); 
            }

            if ( windowScrollTop < 230) {   
                $header.css('height',($headerHeight - windowScrollTop)+'px');
            }
        });
    }
}

$(document).ready(function() {
    widgets.header();
    .....

示例在这里http://jsfiddle.net/7wp51gu6/

Answer 1

您可以在两个条件的else上设置最终状态

if (windowScrollTop < 100) {
    $logo.css('margin-top', '-' + (windowScrollTop) + 'px');
} else {
     $logo.css('margin-top', '-100px');
}

if (windowScrollTop < 230) {
    $header.css('height', ($headerHeight - windowScrollTop) + 'px');
} else {
    $header.css('height', ($headerHeight - 230) + 'px');
}

http://jsfiddle.net/gaby/7wp51gu6/7/

演示

Answer 2

我做了一些快速修改，需要你的一些快速反馈，但请检查这个小提琴......

http://jsfiddle.net/7wp51gu6/6/

我只在这里更新了脚本：

if (windowScrollTop >= 100) {
    $logo.css('margin-top', '-100px');
}else{
    $logo.css('margin-top',0);
}

当它大于或等于100时，它基本上将它设置在你想要的顶部。当你位于你想要它的顶部时，它也会将它设置回来。

还对某些css进行了更改，将主要内容压缩到312px。检查一下。根据您当前显示的内容，我们将来需要的是100％必要的。

$（窗口）.scrollTop（）;没有快速射击

2 个答案: