Question

我希望以下对象的位置是固定的，但它必须位于幻灯片放映下方上边缘800 px 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

我认为，你使用普通的桌面屏幕，然后它在你的大图片背后:) 如果添加z-index：1;它将高于它。你真的希望它始终在800px？在小型设备上，它永远不会位于可视区域内。

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），则在您的#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>

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

3 个答案: