Question

我浏览了各种各样的页面，但没有找到可行的解决方案。当我滚动时，我希望我的div中的文本逐渐变得更加透明。拜托，有人可以帮忙吗？这是我的代码：

<script src = "/js/titleScroll.js"></script>
<div class = "header-title">


    <h1>Title</h1>
    </div>

和：

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
      $('header-title').css('opacity', 0.8);
    } else {
      $('header-title').css('opacity', 1);
    }
  });
});

这是我的css：

.header-title {
width: 80%;
height: 100px;
left: 50%;
top: 50%;
font-size: 1.5em;   
text-align: center;
transform: translateX(-50%); 
margin-top: -50px;
position: relative;
max-width: 100%;
background-attachment: fixed;
position: float;

}

.header-title h1 {
    color: white;
    text-shadow: 2px 2px 4px #d1d1d1;
    font-family: arial, sans-serif;
    white-space: nowrap;
    text-transform: uppercase;
    display: inline-block;


}

谢谢。

Answer 1

问题是，目前你只是在用户不在页面顶部时触发0.8不透明度。每次执行滚动时尝试获得顶部偏移，然后根据该偏移量应用不透明度，它可以是线性函数，或者更复杂的 - 它取决于它将如何淡入/淡出。

这是一个非常快速的工作示例：

<head>
    <style>

    body {
        min-height: 4000px;
    }

    .header-title {
        position: fixed;
        width: 80%;
        height: 100px;
        left: 50%;
        top: 50%;
        font-size: 1.5em;
        text-align: center;
        transform: translateX(-50%);
        margin-top: -50px;
        max-width: 100%;
        background-attachment: fixed;
    }

    .header-title h1 {
        color: white;
        text-shadow: 2px 2px 4px #d1d1d1;
        font-family: arial, sans-serif;
        white-space: nowrap;
        text-transform: uppercase;
        display: inline-block;
    }

    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <script>
    $(document).ready(function() {
        $(window).scroll(function(event) {
            let scroll = $(this).scrollTop();
            let opacity = 1 - (scroll / 1000);
            if (opacity >= 0) {
                $('.header-title').css('opacity', opacity);
            }
        });
    });
    </script>
    <div class = "header-title">
        <h1>Title</h1>
    </div>
</body>

https://jsfiddle.net/un2bdvfm/

滚动

1 个答案: