Question

我想要做的是根据滚动更改某些元素的CSS。例如，我有一个div，并希望在网站向下滚动500px时将其不透明度设为0，但我希望通过转换实现它，例如当网站向下滚动250px时，不透明度应为0.5我正在寻找一个好方法，在滚动循环中有几个if语句不太好，也许有一些库可以做到这一点？

Answer 1

如果您希望渐变设置与页面的滚动位置相关，则只需在Javascript中执行此操作即可。您可以通过从style="overflow: hidden; position: relative; border:0px; margin:0px"中减去window.height来计算整个页面的可滚动长度。从那里，您可以计算document.height的不透明度百分比。试试这个：

document.scrollTop

Working example

Answer 2

这对你有用。你应该做的是将滚动事件绑定到你的窗口，并计算否。滚动像素。然后，您可以根据此值计算opacity，（此处500为您的500px限制）

opacity = (1 - scrolledNoOfPixels / 500)

然后更改相关元素的css属性。

var scrolledValue = 0;

$(window).scroll(function (event) {
    var scrolled = $(document).scrollTop() - scrolledValue;
    console.log("Scrolled pixels :  " + scrolled);
    $("#mydiv").css('opacity', 1 - scrolled / 500);
});

body {
    height: 1200px;
    background: red;
    opacity: 0.6;
}

#mydiv{
    width:300px;
    height:1000px;
    background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body>
    <div id="mydiv"></div>
</body>

Answer 3

使用一些标准的JavaScript，或者jQuery和数学，这很容易做到： - ）

使用背景颜色代替不透明度的示例：

$(document).ready(function(){
    $(window).scroll(function(){
        var max = 500;
        var current = $(window).scrollTop();
        var opacity = 1 - (current / max);

        $('#box').css('background-color', 'rgba(127, 208, 249, '+opacity+')');

    });
});

您可以更改背景颜色以获得不透明度。如果你真的想要那个。但这会给你效果，我想你正在寻找。

检查完整示例：http://jsfiddle.net/L23gfL80/1/

只使用不透明度，框内的内容也会消失。

检查不透明度示例：http://jsfiddle.net/w2d8dura/

Answer 4

查看一些CSS Parallax Scrolling Effects，这就是你要找的东西，这里有一些有用的网站：

http://keithclark.co.uk/articles/pure-css-parallax-websites/

http://davidwalsh.name/parallax

你也可以在谷歌上做一些关于它的研究，即使在Youtube上也有一些不错的教程。

Answer 5

来自插件网站：

当您滚动到时，Waypoints是触发功能的最简单方法一个元素。

here is a link到jquery插件。

20px到顶部

的元素示例

Imports System.Threading
Imports System.Net
Imports System.Net.Sockets

Public Class FrmTCPServer
    Dim fn, temp_file, str_rute, str_filename, str_content, file_name, clNo, NewText As String
    Dim file_len, recfilelen, counter As Integer

    Dim serverSocket As New TcpListener(IPAddress.Any, 9088)
    Dim clientSocket As TcpClient

    Public thread As Thread = Nothing

    Private Sub FrmServer_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Lbconn.Items.Clear()

        Dim IPHost As IPHostEntry = Dns.GetHostEntry(Dns.GetHostName)
        lblStatus.Text = "My IP address is " + IPHost.AddressList(1).ToString()
    End Sub

    Private Sub Btnstart_Click(sender As Object, e As EventArgs) Handles Btnstart.Click
        serverSocket.Start()

        ThreadProcSafe("Server Started")

        thread = New Thread(New ThreadStart(AddressOf listenerThread))
        thread.Start()
    End Sub

    Private Sub listenerThread()
        While (True)
            counter += 1
            clientSocket = serverSocket.AcceptTcpClient()
            ThreadProcSafe("Client No: " & Convert.ToString(counter) & " IP: " & (IPAddress.Parse(CType(clientSocket.Client.RemoteEndPoint, IPEndPoint).Address.ToString())).ToString() & " Started!")

            Dim client1 As New FrmTCPServer
            client1.startClient(clientSocket, Convert.ToString(counter))
        End While
    End Sub

    Public Sub startClient(ByVal clientSocket As TcpClient, ByVal counter As Integer)
        thread = New Thread(New ThreadStart(AddressOf handlerThread))
        thread.Start()
    End Sub

    Private Sub handlerThread()
        ThreadProcSafe("Receiving File... ")
    End Sub

    Sub ThreadProcSafe(item As Object)
        If Lbconn.InvokeRequired Then
            Lbconn.Invoke(Sub() Lbconn.Items.Add(item & " (Invoke)"))
        Else
            Lbconn.Items.Add(item & " (No Invoke)") '**Here pass whith no exception but does not add the item to the listbox**
        End If
    End Sub
End Class

什么是基于滚动在网页上更改内容的好方法？

5 个答案: