純粋なjavascriptを使用したCSSの切り替え

アニメーションを左からではなく中央から開始したいと思っています。私が行ったコードを添付しています。上記純粋なjavascriptを使用したCSSの切り替え

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);

* { 
 
    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>

私は私が中心の方法を変更したことが

出典

2016-08-26 Mohammed Hassan

DBSはそう別の質問をしました。あなたがそれをチェックするのに十分親切であれば、私は非常に義務づけられます。 –

を左に中央から行きたい、私はその左から始まる、残念ながら私のテストのために書かれているコードです。固定要素に対して正しく動作する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; 
 
}

<!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>

出典

2016-08-26 16:12:08 DBS

はい、これは私が望んでいたものです。コードは素晴らしい作品です。私のためにもう1つの事をチェックできますか？私は#navへの丸められたボーダーを与えたり、取り除こうとしていましたが、javascriptで作業していません。あなたの助けの男に感謝します。ありがとうございました –

丸められた角を追加しました。これが問題解決に役立つ、または問題を解決する場合は、それをアップヴォートするか、正しい答えとして受け入れることができます:) – DBS

位置設定を削除し、スクロールダウンするとき、 "0オート" ではなく "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>

出典

2016-08-26 16:14:52 depiction

純粋なjavascriptを使用したCSSの切り替え

答えて

関連する問題