jqueryを使用してrelativeからfixedに位置を変更しますか？

Question

次のオブジェクトの位置を固定したいのですが、スライドショーの下の上端から800ピクセルのaproxに配置する必要があります。これは画面サイズの外にあることを意味します。jquery-toogleクラスで作成できますが、それを自分ですることができます - あなたの助けをありがとう！

http://vtwg.eu/ZMT/untitled3.html（要素が表示されないウェブサイト）

ビクトリア

<div id="book-now"> 
<a href="mailto:musictours@zzkrecords.com?subject=Music_Tours"><img 
src="book_now.png" alt="" width="90"></img></a> 
</div> 


#book-now{ 
position: fixed; 
top: 800px; 
right: 100px; 
width: 160px; 
height: 120px; 
text-align: right; 
} 

Answer 1

基本的に、あなたはそれが一定値を超えた場合scrollTop();を測定し、する必要があります（あなたのケースでは、800ピクセルこの例では、 - 300ピクセル）、それに#book-now

のあなたのIDで一定の地位を与えます下にそれをチェックアウト：

$(window).scroll(function() {  
 
var scroll = $(window).scrollTop(); 
 

 
if (scroll >= 300) { 
 
    $(".fixed-header").addClass("fixedPos"); 
 
} 
 
else{ 
 

 
    $(".fixed-header").removeClass("fixedPos"); 
 
} 
 
});

.fixed-header { 
 
    background-color: #fff; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 300px; 
 
    left: 0; 
 
} 
 

 
/*the fixed snippet, triggered by js*/ 
 
.fixedPos{ 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    z-index: 100; 
 
    top: 0; 
 
} 
 

 
.fixed-header__nav li { 
 
    display: inline-block; 
 
    list-style-type: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<header class="fixed-header"> 
 
    <ul class="fixed-header__nav"> 
 
    <li>Item 1</li> 
 
    <li> Item 2</li> 
 
    <li>Item 3</li> 
 
    </ul> 
 
</header> 
 

 
<div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</div>

Answer 2

私は、あなたは、zを追加する場合は、そのあなたの大きな絵:) の後ろに、通常のデスクトップ画面を使用して、仮定-index：1;それはその上にあるでしょう。あなたは本当にそれが常に800pxになってほしいですか？スモールデバイスでは、表示可能な領域内に決して置かれません。

Answer 3

JQueryに慣れていない場合は、これらの変更をCSSで試してみてください。

#header1 { 
    padding: 20px; 
    position: relative; 
    z-index: 100000; 
} 


.slideshow-container { 
    max-width: 2000px; 
    position: relative; 
    margin: 0px; 
    z-index: 100000; 
} 
#book-now{ 
    position: fixed; 
    top: 550px; 
    right: 100px; 
    width: 160px; 
    height: 120px; 
    text-align: right; 
    z-index: 9999; 
}