Question

在下面的代码片段中，如果您在控制台打开的情况下运行它，您应该看到滚动时，一旦蓝色div在视图中，控制台就会记录“start”，一旦它滚出视图，它就会记录“端”。

我想要实现的是根据滚动返回屏幕上可见的数量，以百分比表示。因此，当它还没有滚动到时，它返回0％，当它只是在屏幕上时它是1％，当它滚动过去时它返回100％。我可以计算滚动文档的百分比，我只是不知道如何使用页面的特定区域。最后，当它滚动过去时，该框会逐渐消失，这是我正在尝试做的一种效果，但是直到它出现在屏幕上才会启动淡入淡出。

我怎么能做到这样的事情？我有一种强烈的感觉，我过度复杂了。

打开控制台的Codepen：http://codepen.io/jhealey5/pen/VaMQEe?editors=1111

(function($){
  var $box = $('div');
  
  $(window).on('scroll', function(){
    var $win = $(window),
		rect = $box.get(0).getBoundingClientRect(),
        top = rect.top,
        bottom = rect.bottom;
    
    if (top <= $win.height()) {
		console.log('start');
	}
	  
	if (bottom < 0) {
		console.log('end');
	}
  });
  
})(jQuery);

p {
  font-size: 18px;
  margin-bottom: 40px;
}

div {
  height: 200px;
  background: #ace;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nibh augue, fermentum a diam sit amet, ultrices ullamcorper orci. Pellentesque non pretium urna. Sed eu ex id lorem congue tristique euismod vel tortor. Vestibulum in ante diam. Cras consequat dui ac magna sodales tincidunt. Sed justo quam, rutrum et elit vel, finibus lobortis dolor. Aenean tempus lacus a quam sagittis, eu dictum massa dapibus. Nulla cursus molestie mi, et semper ligula suscipit ac. Aliquam et finibus eros.</p>

<p>Integer at felis egestas, auctor dui quis, ornare augue. Integer tincidunt, lorem nec luctus malesuada, ante felis ultrices est, at bibendum orci sapien et metus. Nulla scelerisque dui in elit blandit placerat. Praesent massa nisi, pellentesque vitae sollicitudin non, porttitor non dolor. Integer vestibulum facilisis mauris. In vestibulum diam sed augue fringilla, id luctus tellus hendrerit. Proin ornare facilisis venenatis. Nunc ac est faucibus, luctus elit rutrum, ultrices lectus. Proin tempus elit ut ligula tempor, eu facilisis massa lacinia. Integer ultrices diam in eros blandit, non accumsan dui luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc tempus fringilla interdum. In vel maximus magna, sit amet aliquet quam. Donec consectetur sed magna sit amet euismod. Quisque id orci et nisi feugiat placerat vel et urna. Quisque sit amet semper magna.</p>

<p>Aenean sapien lectus, elementum ac quam quis, condimentum scelerisque dui. Donec ultricies, dolor eu laoreet iaculis, sapien ipsum ornare mauris, a pharetra diam diam in dui. Ut convallis placerat dolor non suscipit. Vivamus mollis tempor massa, quis maximus nibh ultrices vitae. Ut eleifend, orci et accumsan placerat, ligula sapien vulputate ipsum, a consequat lectus libero mollis lectus. Phasellus eget diam quam. Duis tincidunt, nisi ut condimentum lobortis, libero urna viverra justo, quis dignissim lorem dui eu erat. Nunc consectetur mi vitae tincidunt gravida. Nunc lacinia arcu non dolor fringilla, eget congue dui faucibus. Nullam vitae enim convallis, dictum quam cursus, semper tortor. Morbi mauris purus, placerat maximus mauris sit amet, congue sodales elit.</p>

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur nec dictum nisi, vel auctor ligula. Vivamus vulputate pulvinar elementum. Donec arcu eros, efficitur a lectus ut, tempus iaculis nibh. Donec ac ex justo. Praesent ut lacinia nisi. Sed massa velit, fermentum nec sollicitudin quis, egestas vitae nisi. Aenean semper leo dui, sed vulputate mi elementum ut. Nulla in urna ultrices, vulputate odio et, bibendum metus. Pellentesque commodo libero id faucibus vulputate. Nullam bibendum suscipit neque, nec luctus magna porttitor et. Integer vel nulla id arcu egestas finibus quis quis ante. Nulla at laoreet lorem. Pellentesque et purus enim.</p>

<p>Morbi convallis dictum lectus, eget volutpat risus fringilla id. Sed tincidunt nunc orci, sed cursus nisi tristique et. Donec suscipit laoreet tempus. Nam vehicula eu elit sit amet blandit. Quisque lacinia tempor mauris et sodales. Sed tempor, purus eu bibendum egestas, neque orci dignissim nulla, eget hendrerit est turpis vel elit. Aenean a vulputate ligula. Mauris tincidunt metus tellus, eget malesuada est feugiat eu. In interdum, ex nec porta cursus, enim sem suscipit magna, sit amet rutrum lacus nunc non ex. Maecenas auctor dolor condimentum lacinia bibendum. Vestibulum nisl magna, dictum id leo in, cursus gravida erat.</p>

<div></div>

<p>Integer at felis egestas, auctor dui quis, ornare augue. Integer tincidunt, lorem nec luctus malesuada, ante felis ultrices est, at bibendum orci sapien et metus. Nulla scelerisque dui in elit blandit placerat. Praesent massa nisi, pellentesque vitae sollicitudin non, porttitor non dolor. Integer vestibulum facilisis mauris. In vestibulum diam sed augue fringilla, id luctus tellus hendrerit. Proin ornare facilisis venenatis. Nunc ac est faucibus, luctus elit rutrum, ultrices lectus. Proin tempus elit ut ligula tempor, eu facilisis massa lacinia. Integer ultrices diam in eros blandit, non accumsan dui luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc tempus fringilla interdum. In vel maximus magna, sit amet aliquet quam. Donec consectetur sed magna sit amet euismod. Quisque id orci et nisi feugiat placerat vel et urna. Quisque sit amet semper magna.</p>

<p>Integer at felis egestas, auctor dui quis, ornare augue. Integer tincidunt, lorem nec luctus malesuada, ante felis ultrices est, at bibendum orci sapien et metus. Nulla scelerisque dui in elit blandit placerat. Praesent massa nisi, pellentesque vitae sollicitudin non, porttitor non dolor. Integer vestibulum facilisis mauris. In vestibulum diam sed augue fringilla, id luctus tellus hendrerit. Proin ornare facilisis venenatis. Nunc ac est faucibus, luctus elit rutrum, ultrices lectus. Proin tempus elit ut ligula tempor, eu facilisis massa lacinia. Integer ultrices diam in eros blandit, non accumsan dui luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc tempus fringilla interdum. In vel maximus magna, sit amet aliquet quam. Donec consectetur sed magna sit amet euismod. Quisque id orci et nisi feugiat placerat vel et urna. Quisque sit amet semper magna.</p>

Answer 1

试试这个：

if (top <= $win.height()) {
    console.log(
      Math.min(100,                  // max 100%
        Math.round(                  // round to integer
          ($win.height() - top)      // distance from the top of window
                                     // to the top of the box
            / rect.height            // divided into the height of the box
          * 100                      // multiply by 100 to get percents
        )
      )
    + "%");                          // add a percent sign
}

请参阅demo on Code Pen。

Answer 2

这应该有效

(dgDocument.SelectedCells[2].Column.GetCellContent(item) as TextBlock).Text;

Answer 3

试试这个：

billingCenters

(function($){
  var $box = $('div');
  
  $(window).on('scroll', function(){
    var $win = $(window),
		rect = $box.get(0).getBoundingClientRect(),
        top = rect.top,
        bottom = rect.bottom;
    
    /*if (top <= $win.height()) {
		console.log('start');
	}
	  
	if (bottom < 0) {
		console.log('end');
	}*/
    
    
    var scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
    var MainscrollPercent = Math.round(scrollPercent);
    console.log(MainscrollPercent +"%");
  });
  
})(jQuery);

p {
  font-size: 18px;
  margin-bottom: 40px;
}

div {
  height: 200px;
  background: #ace;
}

滚动显示可见区域的百分比

3 个答案: