スクロールするときにボタンを下に移動する方法は？（CSS）

ヘッダーです。下にスクロールすると、これらの2つのボタンがジョブリストのテキストになります。スクロールするときにボタンを下に移動する方法は？（CSS）

それはそのようにすべきではありません。私はこれらの2つのボタンが常にロゴの下に留まる必要があることを意味します。下にスクロールすると、ロゴやボタンが消えて消えるはずです。

<header> 
    <div class="header-btn"> 
     <a href="" class="btn-one"> Button 1 </a> 
     <a href="" class="btn-two" style="float: right;"> Button2 </a> 
    </div> 
</header>

CSS

header > .header-btn > a { /* Header buttons styling */ 
display: inline-block; 
text-decoration: none; 
font-size: 17px; 
color: #f6f6f6; 
background-color: rgba(77,85,106,0.8); 
letter-spacing: .1em; 
padding: 1em 2em; 
border-radius: 30px; 
border: 1px solid #d6d6d6; 
position: absolute; 
top: 65%; 
margin: 0 15px; 
font-family: 'Syncopate', sans-serif;

}

Imはジョブリストのテキストが消えていることをどのように高速または低速のためのJSを使用していることを言及するのを忘れてしまいました。

var pContainerHeight = $('header').height(); 
$(window).scroll(function(){ 
var wScroll = $(this).scrollTop(); 
if (wScroll <= pContainerHeight) { 

    $('.logo').css({ 
    'transform' : 'translate(0px, '+ wScroll /4 +'%)' 
});

}

出典

2016-11-11 Orkun Oz

固定位置を使用します。 http://www.w3schools.com/cssref/pr_class_position.aspを参照してください。 –

@ElDanieloの「固定」位置は、まったくスクロールしないことを意味します。 –

私たちはあなたのコードの多くを、望ましくは動作中のスニペットで見る必要があります。おそらく 'position：absolute'があなたの問題です。私は' .header-btn'が相対的な位置にないと仮定します。そのため、あなたの絶対的な位置付けは期待どおりには動作しません。しかし、私はそれ以上のことは言わずに、もっと多くのコードを見ることはできません。 – DBS

あなたはこれらのボタンはJavascriptを下る行う必要があります。ページスクロールにイベントリスナーを追加するだけです（すでに行っているように）。ユーザーがスクロールすると、その2つのボタンの位置に差を追加します。

動作するはずlike this JSFiddle何か：相対と.header-BTN位置：絶対

var original_top = $(".buttons").offset().top 
$(window).scroll(function(){ 
    $(".buttons").offset({top: $(this).scrollTop() + original_top}) 
})

出典

2016-11-11 17:31:13 Unapedra

あなたは、ヘッダ位置を設定しようとしています。相対位置はスクロールし、絶対値は相対コンテナとの関係にあるため、スクロールします。

出典

2016-11-11 18:31:34

OppsはDBSからのコメントを忘れました。 –

相対位置から相対位置へ絶対位置を変更

出典

2016-11-11 18:34:46

スクロールするときにボタンを下に移動する方法は？ （CSS）

答えて

関連する問題

スクロールするときにボタンを下に移動する方法は？（CSS）