javascript - 更改滚动上的 div 不透明度-6ren

javascript - 更改滚动上的 div 不透明度

转载作者：太空宇宙更新时间：2023-11-03 22:27:21

24

4

我浏览了多个页面，但未能找到可行的解决方案。当我滚动时，我希望我的 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;


}

谢谢。

最佳答案

问题是，当前您只是在用户不在页面顶部时触发 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/

关于javascript - 更改滚动上的 div 不透明度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50436789/

24

4

0

文章推荐： c# - 跟踪列表框中的项目

文章推荐： c# - SQL 报告服务 : Finding the folder a report is in

文章推荐： c# - 如何在 C# 的数据表中存储 N 维向量？

文章推荐： css - 如何在 Bootstrap Carousel 上移动图像

ffmpeg - 如何使用ffmpeg设置覆盖的不透明度/透明度？
我正在制作一个应用程序，我需要使用 ffmpeg 将两个视频文件叠加在另一个之上。 .我尝试了各种命令，但它所做的只是合并视频。最佳答案基本方法是 ffmpeg -i in1 -i in2 -fi
离屏渲染器中的 Qt3D 透明度
我将 Qt3D 与 offscreen renderer 结合使用并修改框架图以包含背景图像，例如 here . 不幸的是，使用 QPhongAlphaMaterial 为绘制在背景图像上的对象添加透
java - 复合组件背景/透明度
我正在开发的这个组件有视觉问题。它是带有 2 个 JTextField 和 2 个 JLabel 的 JPanel。我不能做坚实的背景。我尝试了几种不透明/背景颜色组合但没有成功。我不允许附加图像，
Gnuplot:线条不透明度/透明度？
我正在使用 Gnuplot 成功绘制一些时间序列数据。然而，该系列相当密集(大约 5 英寸空间中有 10,000 个样本)，当我绘制多个系列时，很难看到绘制在顶部的系列下方。有什么方法可以使线条具有
cocoa - NSImage 透明度
我正在尝试设置一个自定义拖动图标以在 NSTableView 中使用。一切似乎都正常，但由于我对 Quartz 缺乏经验，我遇到了问题。 - (NSImage *)dragImageForRowsWi
delphi - VCL组件不透明度/透明度
是否可以制作例如 20% 透明的 TMemo 或其他 vcl 组件？像 TButton 或 TEdit 吗？在谷歌搜索解决方案时，我发现了这个: From Here ，然后我想，如果我在窗体上绘制图
黑色背景上的 Scenekit 透明度
我目前正在学习如何使用 Scenekit，并且遇到了透明对象的问题。我写了一个着色器来增加正面看脸时的透明度，当我选择白色背景时，一切都按预期工作...... transparency with wh
OpenGL 透明度/半透明
我对 openGL 中的 alpha 混合有疑问... 我尝试了一些绘制透明对象的方法...通过在绘制透明面之前禁用 GL_DEPTH_TEST 并在绘制透明面后再次重新启用 GL_DEPTH_TES
java - 透明度 webView
我正试图让我的背景 webView 像那样透明: webView.setBackgroundColor(0x00000000); 但它不起作用，如果我添加这一行，一切都是透明的(我看不到我的 html
android - TabLayout 透明度
我目前正在创建一个应用程序并且出现了这个问题，我想让 TabLayout 透明。当我使用 RelativeLayout TabLayout 覆盖内容时，当我使用 LinearLayout TabLay
ios - UINavigationItem 透明度
我有一个 UINavigationItem(不是 UINavigationBar)，我想使其透明或不透明。这是在我建立从导航 Controller 到我的 UIViewController 子类的关系
安卓 Activity 透明度
是否可以让您的 android Activity 以透明模式在当前正在运行的 Activity 之上运行，以便您可以通过它看到它下面的 Activity ？如果可能，您可以设置不同级别的透明度吗？最
javascript - noUiSlider 透明度
我正在使用 noUiSlider 范围 slider 。这是 jsfiddle: https://jsfiddle.net/oun5p1xz/ behaviourSlider = document.g
C# 控制台不透明度/透明度
有没有办法改变控制台的不透明度使其半透明？还有办法将控制台的背景颜色更改为自定义颜色吗？最佳答案快速谷歌显示 this site其中包含用于具有透明窗口的控制台应用程序的代码。本质上，您必须获
android - 按钮不透明度/透明度
主.xml: 这是我的 main.xml，我试图使按钮最透明，但我仍然想看到它们，但我不知道要添加什么以及在哪里添加，请用低不透明度更正我的 xml在按钮
java - JTabbedPane 透明度
如何将实际内容 Pane 的背景设置为不透明，我添加到其中的面板我已经设置为不透明，但即使我这样做，选项卡 Pane 的主要区域仍显示为蓝色 JTabbedPane tabbedPane = new
html - 继承颜色但覆盖不透明度/透明度
是否可以继承颜色但覆盖不透明度值？以下是伪 CSS 中的示例: .color-class { background-color: rgba(255, 0, 0, 0); } .lighten
ios - UINavigationController 透明度？
我正在尝试让我的导航栏变得 100% 透明，以便 UINavigationButtonItems 只可见并且背景(通常为白色)应该显示背景图像。我试过了 HomeNavigationControll
CSS3 透明度 + 渐变
RGBA 非常有趣，-webkit-gradient、-moz-gradient 和呃... progid:DXImageTransform.Microsoft.gradient 也是如此...是的。
android - AppBarLayout 透明度
我一直在尝试使用 AppBarLayout，但找不到使它的背景透明的方法。我的意思是: 这是我的 XML: 如您所见，我使用的是颜色 #8000

首页

博学

6Ren·AI

商城

javascript - 更改滚动上的 div 不透明度