1. 技术文章
  2. Prevent a Fixed Positioned Background from Jumping to the Top of a Page on a Click Event?

Prevent a Fixed Positioned Background from Jumping to the Top of a Page on a Click Event?

由 蓝咒 提交于 2019-12-25 01:49:33

问题


I have developed an image/lightbox viewer for multiple images on a page. When the viewer is opened, it adds a .no-scroll class to the <body> tag. Aside from everything else functioning properly, I'm trying to figure out why the .no-scroll class jumps to the top of the page each time it is prompted with a .click() event.

I've read that this may have something to do with position: fixed; being applied, but since I need the position to be fixed in this case, there doesn't appear to be a ton of workarounds. I've even tried applying position: absolute; instead, but this didn't produce the result I wanted because it didn't prevent the body background from vertically scrolling on mobile devices, (whereas position: fixed; was able to).

Here's a snippet that should further exemplify the issue at hand:

$('.pic > img').click(function() {
  var srcToCopy = $(this).attr('src');
  $('body').find('.imgsrc').attr('src', srcToCopy);
  $('body').addClass('no-scroll');
  $('#view').addClass("target");
});

$('#customlightbox-controls').on('click', function() {
  $('body').removeClass('no-scroll');
  $('#view').removeClass("target");
});
body {
  background: url('http://2.bp.blogspot.com/-FFEo8jRHyI8/TtEKfbM9UTI/AAAAAAAAADk/Nj1P4BnDyro/s1600/Grass+00+seamless.jpg');
  background-size: cover;
  margin: 0;
  padding: 0;
  border: 0;
  height: auto;
  width: 100%;
}

body.no-scroll {
  overflow: hidden;
  height: auto;
  width: 100%;
}

.pic,
#imgsrc {
  display: inline-block;
  cursor: pointer;
}

img {
  width: 150px
}

a {
  display: inline-block;
  line-height: 0;
}

.container {
  text-align: center;
  display: block;
  width: 100%;
  line-height: 0;
}

.customlightbox {
  top: 0%;
  bottom: 0%;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: -5;
  opacity: 0;
}

.customlightbox-imgwrap {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}

.customlightbox img {
  width: auto;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#customlightbox-controls {
  cursor: pointer;
  box-sizing: border-box;
  position: fixed;
  height: 50px;
  width: 50px;
  top: -50px;
  right: -3px;
  z-index: 5;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  opacity: .7;
}

#close-customlightbox {
  display: block;
  position: absolute;
  overflow: hidden;
  height: 30px;
  width: 30px;
  right: 10px;
  top: 10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#close-customlightbox:before {
  content: "";
  display: block;
  position: absolute;
  height: 0px;
  width: 2px;
  left: 14px;
  top: 0;
  background: white;
  border-radius: 2px;
}

#close-customlightbox:after {
  content: "";
  display: block;
  position: absolute;
  width: 0px;
  height: 2px;
  top: 14px;
  left: 0;
  background: white;
  border-radius: 2px;
}

.customlightbox.target {
  z-index: 4;
  opacity: 1;
  display: inline-block;
}

.customlightbox.target img {
  opacity: 1;
}

.customlightbox.target~#customlightbox-controls {
  top: -3px;
}

.customlightbox.target~#customlightbox-controls #close-customlightbox:after {
  width: 30px;
}

.customlightbox.target~#customlightbox-controls #close-customlightbox:before {
  height: 30px;
}

.lb-animate {
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lightbox Instance 1 -->
<div class="container">
  <div class="pic">
    <img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
  </div>
</div>

<!-- Lightbox Instance 2 -->
<div class="container">
  <div class="pic">
    <img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
  </div>
</div>

<!-- Lightbox Instance 3 -->
<div class="container">
  <div class="pic">
    <img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png">
  </div>
</div>

<!-- Lightbox Instance 4 -->
<div class="container">
  <div class="pic">
    <img src="http://i2.wp.com/lfisdelhi.com/wp-content/uploads/2016/05/Sunflower-icon.png">
  </div>
</div>

<!-- Lightbox Instance 5 -->
<div class="container">
  <div class="pic">
    <img src="http://icongal.com/gallery/image/203372/birthday_flower_love_valentine_yellow_rose.png">
  </div>
</div>

<!-- Lightbox Controls -->
<div class="customlightbox lb-animate" id="view">
  <div class="customlightbox-imgwrap">
    <img class="imgsrc" id="customlightbox-img" src="">
  </div>
</div>
<div id="customlightbox-controls" class="lb-animate">
  <a id="close-customlightbox" class="lb-animate"></a>
</div>

回答1:


You just have to remove the position: fixed;

var $scrollTop = 0;
$('.pic > img').click(function () {
    var $body = $('body');
    $scrollTop = $(window).scrollTop();
    $body.css('position', 'fixed');
    $body.css('top', '-' + $scrollTop + 'px');
    $body.css('background-position', '0 -' + $scrollTop + 'px');
    var srcToCopy = $(this).attr('src');
    $body.find('.imgsrc').attr('src', srcToCopy);
    $body.addClass('no-scroll');
    $('#view').addClass("target");
});

$('#customlightbox-controls').on('click', function () {
    var $body = $('body');
    $body.css('position', '');
    $body.css('background-position', '');
    $scrollTop = $(window).scrollTop($scrollTop);
    $body.removeClass('no-scroll');
    $('#view').removeClass("target");
});
body {
  background: url('http://2.bp.blogspot.com/-FFEo8jRHyI8/TtEKfbM9UTI/AAAAAAAAADk/Nj1P4BnDyro/s1600/Grass+00+seamless.jpg');
  background-size: cover;
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
  width: 100%;
}

body.no-scroll {
    overflow: hidden;
    height: auto;
    width: 100%;
}

.pic,
#imgsrc {
    display: inline-block;
    cursor: pointer;
}

img {
    width: 150px
}

a {
    display: inline-block;
    line-height: 0;
}

.container {
    display: block;
    width: 100%;
    line-height: 0;
}

.customlightbox {
    top: 0%;
    bottom: 0%;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: -5;
    opacity: 0;
}

.customlightbox-imgwrap {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    text-align: center;
}

.customlightbox img {
    width: auto;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    opacity: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

#customlightbox-controls {
    cursor: pointer;
    box-sizing: border-box;
    position: fixed;
    height: 50px;
    width: 50px;
    top: -50px;
    right: -3px;
    z-index: 5;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    opacity: .7;
}

#close-customlightbox {
    display: block;
    position: absolute;
    overflow: hidden;
    height: 30px;
    width: 30px;
    right: 10px;
    top: 10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

#close-customlightbox:before {
    content: "";
    display: block;
    position: absolute;
    height: 0px;
    width: 2px;
    left: 14px;
    top: 0;
    background: white;
    border-radius: 2px;
}

#close-customlightbox:after {
    content: "";
    display: block;
    position: absolute;
    width: 0px;
    height: 2px;
    top: 14px;
    left: 0;
    background: white;
    border-radius: 2px;
}

.customlightbox.target {
    z-index: 4;
    opacity: 1;
    display: inline-block;
}

.customlightbox.target img {
    opacity: 1;
}

.customlightbox.target ~ #customlightbox-controls {
    top: -3px;
}

.customlightbox.target ~ #customlightbox-controls #close-customlightbox:after {
    width: 30px;
}

.customlightbox.target ~ #customlightbox-controls #close-customlightbox:before {
    height: 30px;
}

.lb-animate {
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lightbox Instance 1 -->
<div class="container">
  <div class="pic">
    <img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
  </div>
</div>

<!-- Lightbox Instance 2 -->
<div class="container">
  <div class="pic">
    <img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
  </div>
</div>

<!-- Lightbox Instance 3 -->
<div class="container">
  <div class="pic">
    <img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png">
  </div>
</div>

<!-- Lightbox Instance 4 -->
<div class="container">
  <div class="pic">
    <img src="http://i2.wp.com/lfisdelhi.com/wp-content/uploads/2016/05/Sunflower-icon.png">
  </div>
</div>

<!-- Lightbox Instance 5 -->
<div class="container">
  <div class="pic">
    <img src="https://www.iconexperience.com/_img/v_collection_png/256x256/shadow/flower_blue.png">
  </div>
</div>

<!-- Lightbox Controls -->
<div class="customlightbox lb-animate" id="view">
  <div class="customlightbox-imgwrap">
    <img class="imgsrc" id="customlightbox-img" src="">
  </div>
</div>
<div id="customlightbox-controls" class="lb-animate">
  <a id="close-customlightbox" class="lb-animate"></a>
</div>

EDIT

Above is an update of the snippet, I hope it finally helps you.




回答2:


If I understand correctly you need to remove the position fixed from body.no-scroll. Applying position fixed to an element removes it from the document flow. The element will then be position relative to the viewport and because the body basically defines the viewport there is nothing relative to it that has a scroll so the browser defaults to the top of the page.

Sorry if this doesn't make any sense, it is late here. This definition of posititon:fixed on mozilla might help. https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed

EDITED: Edited because @Yulio Aleman Jimenez showed that .lb-animate didn't need position:fixed instead, which is what I thought.

$('.pic > img').click(function() {
  var srcToCopy = $(this).attr('src');
  $('body').find('.imgsrc').attr('src', srcToCopy);
  $('body').addClass('no-scroll');
  $('#view').addClass("target");
});

$('#customlightbox-controls').on('click', function() {
  $('body').removeClass('no-scroll');
  $('#view').removeClass("target");
});
body {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
  width: 100%;
}

body.no-scroll {
  overflow: hidden;
  height: auto;
  width: 100%;
}

.pic,
#imgsrc {
  display: inline-block;
  cursor: pointer;
}

img {
  width: 150px
}

a {
  display: inline-block;
  line-height: 0;
}

.container {
  display: block;
  width: 100%;
  line-height: 0;
}

.customlightbox {
  top: 0%;
  bottom: 0%;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: -5;
  opacity: 0;
}

.customlightbox-imgwrap {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}

.customlightbox img {
  width: auto;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#customlightbox-controls {
  cursor: pointer;
  box-sizing: border-box;
  position: fixed;
  height: 50px;
  width: 50px;
  top: -50px;
  right: -3px;
  z-index: 5;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  opacity: .7;
}

#close-customlightbox {
  display: block;
  position: absolute;
  overflow: hidden;
  height: 30px;
  width: 30px;
  right: 10px;
  top: 10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#close-customlightbox:before {
  content: "";
  display: block;
  position: absolute;
  height: 0px;
  width: 2px;
  left: 14px;
  top: 0;
  background: white;
  border-radius: 2px;
}

#close-customlightbox:after {
  content: "";
  display: block;
  position: absolute;
  width: 0px;
  height: 2px;
  top: 14px;
  left: 0;
  background: white;
  border-radius: 2px;
}

.customlightbox.target {
  z-index: 4;
  opacity: 1;
  display: inline-block;
}

.customlightbox.target img {
  opacity: 1;
}

.customlightbox.target~#customlightbox-controls {
  top: -3px;
}

.customlightbox.target~#customlightbox-controls #close-customlightbox:after {
  width: 30px;
}

.customlightbox.target~#customlightbox-controls #close-customlightbox:before {
  height: 30px;
}

.lb-animate {
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lightbox Instance 1 -->
<div class="container">
  <div class="pic">
    <img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
  </div>
</div>

<!-- Lightbox Instance 2 -->
<div class="container">
  <div class="pic">
    <img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
  </div>
</div>

<!-- Lightbox Instance 3 -->
<div class="container">
  <div class="pic">
    <img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png">
  </div>
</div>

<!-- Lightbox Instance 4 -->
<div class="container">
  <div class="pic">
    <img src="http://i2.wp.com/lfisdelhi.com/wp-content/uploads/2016/05/Sunflower-icon.png">
  </div>
</div>

<!-- Lightbox Instance 5 -->
<div class="container">
  <div class="pic">
    <img src="https://www.iconexperience.com/_img/v_collection_png/256x256/shadow/flower_blue.png">
  </div>
</div>

<!-- Lightbox Controls -->
<div class="customlightbox lb-animate" id="view">
  <div class="customlightbox-imgwrap">
    <img class="imgsrc" id="customlightbox-img" src="">
  </div>
</div>
<div id="customlightbox-controls" class="lb-animate">
  <a id="close-customlightbox" class="lb-animate"></a>
</div>


来源：https://stackoverflow.com/questions/48244860/prevent-a-fixed-positioned-background-from-jumping-to-the-top-of-a-page-on-a-cli

标签
javascript
jquery
html
css
position
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!