堆栈内存溢出
  简体   繁体   English

如何基于其相对于另一个div的位置更新div

[英]How to update a div based on it's position relative to another div

 原文  2016-07-25 22:05:48  6   4    javascript/ jquery/ html/ date

问题描述

I am trying to find the best way to update the div with id "date" with the dates of the divs that are scrolled past. 我试图找到最好的方法来更新ID为“ date”的div与滚动过去的div的日期。 I thought this may be done through getting the data-date attributes however I was even having trouble obtaining the ids of the divs which are scrolled past. 我以为可以通过获取数据日期属性来完成此操作，但是我什至在获取滚动到其上的div的ID时也遇到了麻烦。 So in this case the content of the date div, should start out as 25 July and then as the div with id=2 passes the date div, the content of the date div should change to 25 July and so on. 因此，在这种情况下，日期div的内容应从7月25日开始，然后当id = 2的div通过日期div时，日期div的内容应更改为7月25日，依此类推。

index.html: index.html的： 

<html>
<head>
<style>

#comments {
float:left;
width:450px;
}

#date {
position: absolute;
top: 0;
margin-top: 20px;
border: 1px solid #A9F5F2;
background-color: #A9F5F2;
color: #6E6E6E;
font-weight: bold;
}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js">    
</script>
<script>
$(document).ready(function() {

$(function () {
$(window).scroll(function (event) {

  var  p =  $('#date').closest('[id]');
  console.log(p); 

});
});
});
</script>
</head>
<body>


<div id="1" data-date="25 July">
comment 1 comment 1 comment 1 comment 1 comment 1 comment 1 <p>
comment 1 comment 1 comment 1 <p>
comment 1 comment 1 comment 1 <p>
</div>

<div id="2" data-date="24 July">
comment 2 comment 2 comment 2 comment 2 comment 2 comment 2 <p>
comment 2 comment 2 comment 2 <p>
comment 2 comment 2 comment 2 <p>
</div>

<div id="3" data-date="23 July">
comment 3 comment 3 comment 3 
comment 3 comment 3 comment 3 <p>
comment 3 comment 3 comment 3 <p>
comment 3 comment 3 comment 3 <p>
</div>

<div id="4" data-date="22 July">comment 4 comment 4 comment 4
comment 4 comment 4 comment 4 <p>
comment 4 comment 4 comment 4 <p>
comment 4 comment 4 comment 4
</div>

<div id="5" data-date="21 July">
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
</div>

<div id="date" style="float:right; position: fixed">
    25 July
</div>

</body>
</html>

4 个解决方案

解决方案1
 2  2016-07-25 22:30:00

You're missing a lot of code, but I threw this together - it will detect when one div hits the top of the window. 您会丢失很多代码，但是我把它们放在一起了-它会检测到一个div何时到达窗口顶部。 Hopefully this helps you and you're able to add on the rest of the functionality you need. 希望这对您有所帮助，并且您可以添加所需的其余功能。

https://jsfiddle.net/tobyl/uquj897s/ https://jsfiddle.net/tobyl/uquj897s/ 

$(window).scroll(function() {

  var elemPos = $("#3").offset().top - $(window).scrollTop();
  var winPos = $(window).scrollTop();

  if (elemPos < winPos) {
    console.log("element is above window top!");
  } else {
    console.log("element has not yet hit the window top.");
  }
});

解决方案2
 0  2016-07-25 22:32:13

Ok i dont have a full solution but here is what I got for you. 好的，我没有完整的解决方案，但这是我为您准备的。

We can use scrollLeft() and scrollTop() to determine the position of the scroll bar (this determining the position of the page and which date we are closest to). 我们可以使用scrollLeft（）和scrollTop（）来确定滚动条的位置（这确定了页面的位置以及我们最接近的日期）。 

    $(window).scroll(function (event) {
var left = $(window).scrollLeft();
var top  = $(window).scrollTop();
var IDofElementIamCloseTo = someSuperCoolCalculationFunction(left,top);

  console.log(IDofElementIamCloseTo ); 

});

function someSuperCoolCalculationFunction(left, top){

//somehow determine how far you have moved and what is closer, maybe you can create a list of key //value pairs or make your divs a fixed width/length.  

}

That should get you moving. 那应该让你感动。

EDIT: the other guys answer is better 编辑：其他人的答案更好

解决方案3
 0 已采纳  2016-07-25 23:22:48

I've added a class to your date divs, such as 我为您的日期div添加了一个类，例如

<div class="myDates" id="1" data-date="25 July">

then 然后 

 $(document).ready(function() { function viewPortCheck(el) { function isElementInViewport(el) { var rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } function givenElementInViewport(el) { return function() { if (isElementInViewport(el)) { let d = el.dataset.date; $('#date').html(d); } }; } if (window.addEventListener) { addEventListener('DOMContentLoaded', givenElementInViewport(el), false); addEventListener('load', givenElementInViewport(el), false); addEventListener('scroll', givenElementInViewport(el), false); addEventListener('resize', givenElementInViewport(el), false); } else if (window.attachEvent) { attachEvent('DOMContentLoaded', givenElementInViewport(el)); attachEvent('load', givenElementInViewport(el)); attachEvent('scroll', givenElementInViewport(el)); attachEvent('resize', givenElementInViewport(el)); } } $(function () { $(window).scroll(function (event) { let elems = $('.myDates'); for(let i = 0; i < elems.length; i++ ){ viewPortCheck(elems[i]); } }); }); }); 
  #comments { float:left; width:450px; } #date { position: absolute; top: 10px; right:10px; border: 1px solid #A9F5F2; background-color: #A9F5F2; color: #6E6E6E; font-weight: bold; min-width:50px; } .myDates { min-height: 30%; margin: 10% 10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="date" style="float:right; position: fixed"> &nbsp; </div> <div class="myDates" id="1" data-date="25 July"> comment 1 comment 1 comment 1 comment 1 comment 1 comment 1 <p> comment 1 comment 1 comment 1 <p> comment 1 comment 1 comment 1 <p> </div> <div class="myDates" id="2" data-date="24 July"> comment 2 comment 2 comment 2 comment 2 comment 2 comment 2 <p> comment 2 comment 2 comment 2 <p> comment 2 comment 2 comment 2 <p> </div> <div class="myDates" id="3" data-date="23 July"> comment 3 comment 3 comment 3 comment 3 comment 3 comment 3 <p> comment 3 comment 3 comment 3 <p> comment 3 comment 3 comment 3 <p> </div> <div class="myDates" id="4" data-date="22 July">comment 4 comment 4 comment 4 comment 4 comment 4 comment 4 <p> comment 4 comment 4 comment 4 <p> comment 4 comment 4 comment 4 </div> <div class="myDates" id="5" data-date="21 July"> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> comment 5 comment 5 comment 5 <p> </div>

解决方案4
 0  2016-07-25 23:57:51

I couldn't finish because of time but based on Toby's answer this code gets the first occurrence of the class "divDate" and based on its size and location changes to the next and changes the div with id="date"... still have to do when scrolls up. 由于时间原因我无法完成，但是基于Toby的回答，此代码首次出现了“ divDate”类，并根据其大小和位置更改为下一个，并使用id =“ date”更改了div ...仍然向上滚动时必须要做的事情。 Sorry any bad english xD 对不起任何不好的英语xD

https://jsfiddle.net/smm7mrqn/ https://jsfiddle.net/smm7mrqn/ 

<div class="divDate" id="1" data-date="25 July">
    comment 1 comment 1 comment 1 comment 1 comment 1 comment 1 <p>
    comment 1 comment 1 comment 1 <p>
    comment 1 comment 1 comment 1 <p>
</div>

<div class="divDate" id="2" data-date="24 July">
comment 2 comment 2 comment 2 comment 2 comment 2 comment 2 <p>
comment 2 comment 2 comment 2 <p>
comment 2 comment 2 comment 2 <p>
</div>

<div class="divDate" id="3" data-date="23 July">
comment 3 comment 3 comment 3 
comment 3 comment 3 comment 3 <p>
comment 3 comment 3 comment 3 <p>
comment 3 comment 3 comment 3 <p>
</div>

<div class="divDate" id="4" data-date="22 July">comment 4 comment 4 comment 4
comment 4 comment 4 comment 4 <p>
comment 4 comment 4 comment 4 <p>
comment 4 comment 4 comment 4
</div>

<div class="divDate" id="5" data-date="21 July">
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
comment 5 comment 5 comment 5 <p>
</div>

<div id="date" style="float:right; position: fixed">
    25 July
</div>

<script>
var $currDiv = $(".divDate").first();
$(window).scroll(function() {
  var elemPos = $currDiv.offset().top - $(window).scrollTop();
  var elemHeight = $currDiv.css("height");
  var winPos = $(window).scrollTop();

  if (elemPos <= 0) {
    $('#date').html($currDiv.attr("data-date"));
  }
  if((parseInt(elemPos) + parseInt(elemHeight)) <= 0){
    $currDiv = $currDiv.next(".divDate");
  } 
});
</script>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Div在另一个Div中的相对位置 - Relative position of Div in another Div 如何仅在打印时相对于另一个 div 设置 div position - How to set div position relative to another div only at printing jQuery如何设置div相对于另一个div的位置？ - jQuery how to set the position of a div with relative to another div? 如何使div的位置相对于单个div？ - How to make the div's position is relative to a single div? 显示具有相对位置的div在另一个div旁边 - show div with relative position next to another div 除了div的位置是相对的，div重叠另一个 - div overlap another though position of div is relative jQuery根据另一个div的位置更改div - Jquery change div based on another div's position 如何根据另一个div的位置增加div的大小-Vanilla JavaScript - How to increase div size based on another div's position - vanilla javascript 如何设置具有相对位置的div - How to set div with position relative 设置div相对于另一个百分比宽度div的位置的位置 - Set position of div relative to position of another percentage-width div
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM