スクロールダウン矢印CSS

Question

私は本当に下のCSSで少し助けていただければ幸いです。私はこれをwww.thehomebird.comに実装しています。私が経験している問題は、ブラウザウィンドウのサイズを（水平方向に）変更すると、矢印がそのサイズで動きます。つまり、ブラウザを違えば常に間違った場所にいます。完璧な世界では、常に同じ場所にあるブラウザのサイズを変更するかのように動作させることが大好きです。

クリックすると、現在と同じように消えて消えます。スクロールアップすると再び表示されます。私はそれを見たいくつかのウェブサイトを見つけようとしましたが、それは好きなはずですが、現時点では何も見つかりませんでした。前もって感謝します！

`/* Middle screen Arrow */ 


.scroll_down_button { 
    color: rgb(255, 255, 255); 
    display: inline-block; 
    font: 400 20px/1 "Josefin Sans",sans-serif; 
    margin: 0 auto; 
    left: 50%; 
    letter-spacing: 0.1em; 
    opacity: 1; 
    position: absolute; 
    vertical-align:middle; 
    text-decoration: none; 
    top: 75%; 
    transform: translate(0px, -50%); 
    transition: opacity 1s ease 0s; 
    z-index: 999; 
    outline: none !important; 
} 

.click_able_arrow { 
    animation: 3s ease 0s normal none infinite running sdb04; 
    border-bottom: 2px solid rgb(255, 255, 255); 
    border-left: 2px solid rgb(255, 255, 255); 
    box-sizing: border-box; 
    height: 24px; 
    left: 50%; 
    margin-left: -12px; 
    position: absolute; 
    vertical-align:middle; 
    top: 75%; 
    transform: rotate(-45deg); 
    width: 24px; 
} 


@-webkit-keyframes sdb04 { 
0% { 
    -webkit-transform: rotate(-45deg) translate(0, 0); 
} 
20% { 
    -webkit-transform: rotate(-45deg) translate(-10px, 10px); 
} 
40% { 
    -webkit-transform: rotate(-45deg) translate(0, 0); 
} 
} 

@keyframes sdb04 { 
0% { 
    transform: rotate(-45deg) translate(0, 0); 
} 
20% { 
    transform: rotate(-45deg) translate(-10px, 10px); 
} 
40% { 
    transform: rotate(-45deg) translate(0, 0); 
} 
} 

Answer 1

ご質問がありましたら、ブラウザウィンドウのサイズを変更すると、矢印の位置が変わりますか？ ....かもしれない最初の考えはあなたが画面は、それが移動します大きくなった場合を意味

left: 50%; 

でそれを配置しているが、私は一般的に、とにかくそのため

left: 50vw; 

のようないくつかのことを使用します。

いますが、それは固定された位置から移動したくない場合は、

left: 200px; 

のようにそのposistionを定義しようとした代わりに、絶対

position: fixed; 

のしている、これはあまりにもうまくいくかもしれませんか？

left: 50%; 
position: fixed; 

が、私はわからないんだけど...

Answer 2

私はいくつかの調整をした：

は、垂直整列を削除：ミドル。 （両方のセクション.scroll_down_buttonと.click_able_arrow）

削除トップ：75％; .click_able_arrow

中と.scroll_down_buttonまだ

ない完璧で550pxの代わりに75％を追加しましたが、より良い、私は

/*中の画面アロー*/

.scroll_down_button { 
color: rgb(255, 255, 255); 
display: inline-block; 
font: 400 20px/1 "Josefin Sans",sans-serif; 
margin: 0 auto; 
left: 50%; 
letter-spacing: 0.1em; 
opacity: 1; 
position: absolute; 
text-decoration: none; 
top: 550px; 
transform: translate(0px, -50%); 
transition: opacity 1s ease 0s; 
z-index: 999; 
outline: none !important; 
} 

.click_able_arrow { 
animation: 3s ease 0s normal none infinite running sdb04; 
border-bottom: 2px solid rgb(255, 255, 255); 
border-left: 2px solid rgb(255, 255, 255); 
box-sizing: border-box; 
height: 24px; 
left: 50%; 
margin-left: -12px; 
position: absolute; 
transform: rotate(-45deg); 
width: 24px; 
}