画像を別のdivにスクロールします。

私はそのdivの中央にある1つのdivの画像を持っています。ユーザーが一度スクロール（スクロール> 50）した後、その画像がヘッダーに挿入されるようにします。

ここは私のcodepen exampleです。

HTML：

<header> <div id="nav"> LINK LINK LINK </div> </header> 

<div id="main"> 
    <img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png"> 
</div>

CSS：

これを行う方法のトンが、これはのコピーがあるように、イメージを重複することで達成するための簡単な方法があります

*{ 
    padding:0; 
    margin:0; 
    overflow-x:hidden; 
} 

#nav{float:right; line-height:70px;} 

header{ 
    width:100%; 
    position:fixed; 
    padding-left:10%; 
    padding-right:10%; 
    background:#fff; 
    height:70px; 
} 

#main{ 
    padding-top:100px; 
    text-align:center; 
    height:800px; 
    background:#3cb5f9;} 
#main img{width:200px; margin:0 auto;}

出典

2017-05-09 pHenomen

mainとheaderにあります。ロード時に、ナビ内に隠しておきます。次に、>50のオフセットを監視するスクロールイベントリスナーを作成します。

trueの場合は、=>メイン画像を非表示にして、ナビ画像を表示します。 false =>メイン画像を表示します。ナビゲーション画像を非表示にする。

また、私はmainのheightを200vhに更新しました。内容をシミュレートするだけです。これは答えには関係ありません。

$(function(){ 
 
    
 
$(window).bind('scroll', function(){ 
 
    
 
    if($(window).scrollTop() >= 50){ 
 
    $("#main img").hide(); 
 
    $("header img").show(); 
 
    }else{ 
 
    $("#main img").show(); 
 
    $("header img").hide(); 
 
    } 
 
    
 
}); 
 
    
 
    
 
});

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    overflow-x: hidden; 
 
} 
 

 
#nav { 
 
    float: right; 
 
    line-height: 70px; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    position: fixed; 
 
    padding-left: 10%; 
 
    padding-right: 10%; 
 
    background: #fff; 
 
    height: 70px; 
 
} 
 

 
header img { 
 
    display: none; 
 
    width: 50px; 
 
    margin: 0 auto; 
 
} 
 

 
#main { 
 
    padding-top: 100px; 
 
    text-align: center; 
 
    height: 200vh; 
 
    background: #3cb5f9; 
 
} 
 

 
#main img { 
 
    width: 200px; 
 
    margin: 0 auto; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <header> 
 
    <div id="nav"> LINK LINK LINK </div> 
 
    <img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png"> 
 
    </header> 
 

 
    <div id="main"> 
 
    <img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png"> 
 
    </div> 
 
</body> 
 

 
</html>

外部Plunker：http://plnkr.co/edit/yS5MdtCeTNJvvn7w5gvl?p=preview

出典

2017-05-09 19:54:40 couzzi

画像を別のdivにスクロールします。

答えて

関連する問題