Javascript jQuery-减少滚动页上的页边距

当用户向下滚动时，我需要减小

.logo box

上的边距和

.frame

上的不透明度，直到

.logo box

的顶部与

.main nav

相交（两者之间的空间为0）

相反，页面似乎正在增长并变为黑色，而不是不透明度逐渐降低

钢笔：

HTML

JS

---

使用此代码似乎可以实现您的愿望

$(window).scroll(function() {
    var requiredOffset = 300;

    // Between 0 and 1 (inclusive)
    var percentage = Math.min(1, $(window).scrollTop() / requiredOffset);

    // Starts at requiredOffset and goes down to 0        
    var marginTop = requiredOffset * (1 - percentage);

    // Opacity of frame
    var alpha = percentage;

    $(".logo-box").css('margin-top', marginTop);
    $(".frame").css('background-color', 'rgba(0,0,0,' + alpha + ')');
});

---

这是我的叉形笔：

使用此代码似乎可以实现您的愿望

$(window).scroll(function() {
    var requiredOffset = 300;

    // Between 0 and 1 (inclusive)
    var percentage = Math.min(1, $(window).scrollTop() / requiredOffset);

    // Starts at requiredOffset and goes down to 0        
    var marginTop = requiredOffset * (1 - percentage);

    // Opacity of frame
    var alpha = percentage;

    $(".logo-box").css('margin-top', marginTop);
    $(".frame").css('background-color', 'rgba(0,0,0,' + alpha + ')');
});

---

这是我的叉形笔：

我认为切换类和设置CSS文件的高度会更好。这比在JS上设置更有意义。但是它需要一个渐进的改变。如果你有两门课，你要么一路扩展，要么一门都没有（除非我有误解）。不过我会努力改进：）这似乎实现了边缘“缩小”-但我仍然需要解决alpha在

.frame

背景值上逐渐变暗的问题。更新的答案@aaronbenjaminnaild！谢谢。我认为切换一个类和设置CSS文件的高度会更好。这比在JS上设置更有意义。但是它需要一个渐进的改变。如果你有两门课，你要么一路扩展，要么一门都没有（除非我有误解）。不过我会努力改进：）这似乎实现了边缘“缩小”-但我仍然需要解决alpha在

.frame

背景值上逐渐变暗的问题。更新的答案@aaronbenjaminnaild！谢谢

$(window).scroll(function(){
    var fromTop = $(window).scrollTop(),
        space   = $('.logo-box').offset().top - $('.main-nav').offset().top,
        alpha   = 1;

        if (space > 0) {
            $(".logo-box").css('margin', + (space - 1) + 'px auto 0 auto');
            $(".frame").css('background-color', 'rgba(0,0,0,' + (alpha + 0.1) + ')');
        } 
        console.log(space);
});

$(window).scroll(function() {
    var requiredOffset = 300;

    // Between 0 and 1 (inclusive)
    var percentage = Math.min(1, $(window).scrollTop() / requiredOffset);

    // Starts at requiredOffset and goes down to 0        
    var marginTop = requiredOffset * (1 - percentage);

    // Opacity of frame
    var alpha = percentage;

    $(".logo-box").css('margin-top', marginTop);
    $(".frame").css('background-color', 'rgba(0,0,0,' + alpha + ')');
});