Question

我想让我的动画从中心开始而不是向左。我附上了我已经完成的代码。

＆＃13;

function yScroll() {
    var nav,yPos;
    nav = document.getElementById('nav');
    yPos = window.pageYOffset;
    if(yPos>5) {
        nav.style.width = '100%';
        nav.style.margin = '0';
        nav.style.position = 'fixed';
        nav.style.top = '0';
    }else {
        nav.style.width = '4em';
        nav.style.margin = "8em auto";
        nav.style.position = 'static';
        nav.style.top = 'auto';
    }
}
window.addEventListener("scroll",yScroll);

＆＃13;

* {
    margin: 0em;
    padding: 0em;
}
    
#nav {
    margin: 8em auto;
    width: 4em;
    height: 4em;
    background-color: grey;
    transition: width 1s ease-in-out, margin 1s ease-in-out;
}
    
section.height {
    height: 100em;
}

＆＃13;

<!DOCTYPE html>
<html lang="eng">
  <head>
    <title>animate</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="animate.js"></script>
  </head>
  <body>
    <div id="nav">
    </div>
    <section class="height"></section>
  </body>
</html>

＆＃13;

以上是我为测试编写的代码，不幸的是它从左边开始我希望它从中心到左边

Answer 1

我已经改变了居中的方法，使用pthread_kill，它可以正确地用于固定元素（两侧使用margin auto对固定位置元素不起作用）

更改也会保留为left: 50%; transform: translateX(-50%);并删除自动边距。

fixed

function yScroll() {
    var nav,yPos;
    nav = document.getElementById('nav');
    yPos = window.pageYOffset;
    if(yPos>5) {
        nav.style.width = '100%';
        nav.style.margin = '0';
        nav.style.top = '0';
        nav.style.borderRadius = "0";
    }else {
        nav.style.width = '4em';
        nav.style.margin = "8em 0";
        nav.style.top = 'auto';
        nav.style.borderRadius = "6px";
    }
}
window.addEventListener("scroll",yScroll);

#nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    margin: 8em 0;
    width: 4em;
    height: 4em;
    background-color: grey;
    border-radius: 6px;
    transition: width 1s ease-in-out, margin 1s ease-in-out;
}
    
section.height {
    height: 100em;
}

Answer 2

删除位置设置，向下滚动时，将边距设置为“0 auto”而不是“0”。

function yScroll() {
    var nav,yPos;
    nav = document.getElementById('nav');
    yPos = window.pageYOffset;
    if(yPos>5) {
        nav.style.width = '100%';
        nav.style.margin = '0 auto';
        nav.style.top = '0';
    }else {
        nav.style.width = '4em';
        nav.style.margin = "8em auto";
        nav.style.top = 'auto';
    }
}
window.addEventListener("scroll",yScroll);

* {
    margin: 0em;
    padding: 0em;
}
    
#nav {
    margin: 8em auto;
    width: 4em;
    height: 4em;
    background-color: grey;
    transition: width 1s ease-in-out, margin 1s ease-in-out;
}
    
section.height {
    height: 100em;
}

<!DOCTYPE html>
<html lang="eng">
  <head>
    <title>animate</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="animate.js"></script>
  </head>
  <body>
    <div id="nav">
    </div>
    <section class="height"></section>
  </body>
</html>

使用纯javascript进行css转换

2 个答案: