使用 jquery 将位置从相对位置更改为固定位置？

Question

我希望以下对象的位置固定，但它必须位于距幻灯片下方顶部边缘大约 800 像素的位置，这意味着在我的屏幕外 size.I 被告知可以使用 jquery- toogle class 但我自己做不到 - 非常感谢您的帮助！

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

我假设，你使用的是普通桌面屏幕，然后它在你的大图片后面:) 如果你添加一个 z-index: 1;它会在它上面。您真的希望它始终保持在 800 像素吗？在小型设备上，它永远不会在可视区域内。

Answer 2

如果您不熟悉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;
}

Answer 3

基本上，您需要测量 scrollTop();，如果它超过某个值（在您的情况下为 800px，在本例中为 300px），则在您的 ID [=14] 中为其指定一个固定位置=]

在下面查看：

$(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>

使用 jquery 将位置从相对位置更改为固定位置？

Changing position from relative to fixed using jquery?

html

javascript

css

jquery

fixed