问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js根据就滚动条位置改变元素动画效果

头像
_XYZ111
    492255176
    
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <style type="text/css">
            body {
                margin: 0;
            }

            #demo {
                position: sticky;
                top: 0;
                height: 100px;
                padding-top: 1rem;
                padding-bottom: 1rem;
                background-color: #E6E6E6;
                border-top: 15px solid blue;
            }
        </style>
        <nav id="demo">
            导航条
        </nav>
        <div style="height: 300vh;">
            123
        </div>
        456
    </body>
</html>

    image.png

    需求

    给定一个位置(随便什么位置都行)

    image.png

    当滚动条超出这个位置时(在这个位置的下面)
    将上面导航条上下外边距设置为0, 边框设置为0

    当滚动条未超出这个位置时(在这个位置的上面)
    返回原先的样式(上下边距1rem, 边框15px, 蓝色)

    如何使用js或jquery动画效果实现?

    javascriptjquery
    阅读 1.8k
    1 个回答
    得票最新
    头像
    _XYZ111
      492255176

      已解决
      使用 IntersectionObserver 和 $.animate()

      
function getScrollTop() {

    return $(this).scrollTop()

}

function bindScrollEvent() {

    const target = document.getElementById('common-header')
    const callback = function() {

        $("#common-nav").stop()
        $("#common-nav .box-container").stop()

        if (getScrollTop() < 700) {
            $("#common-nav").animate({
                borderWidth: "12px",
                opacity: 1
            })
            $("#common-nav .box-container").animate({
                paddingTop: "1rem",
                paddingBottom: "1rem"
            })
        } else {
            $("#common-nav").animate({
                borderWidth: "0px",
                opacity: 0.95
            })
            $("#common-nav .box-container").animate({
                paddingTop: "0rem",
                paddingBottom: "0rem"
            })
        }

    }

    new IntersectionObserver(callback).observe(target)

}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题