Question

我有一个div元素，当加载网页并将其放置在其他div元素之间时，该元素可见或不可见。这是代码示例：

import React, { Component } from 'react';    

function arraymove(arr, fromIndex, toIndex) {
        var element = arr[fromIndex];
        arr.splice(fromIndex, 1);
        arr.splice(toIndex, 0, element);
    }

    class App extends React.Component {
        constructor(props){
        super(props);

        this._handleItemSort = this._handleItemSort.bind(this);

        this.state = {
            shoppingList: ['Bananas', 'Apples', 'Rice', 'Eggs' , 'GTX 1080Ti', 'Avocado']
        }
      }



      _handleItemSort(dir, currentIndex) {
        // create new list of items from a spread of our current shoppingList state.
        // we don't want to reference the actual state and mutate it! 
        const shoppingList = [...this.state.shoppingList]

        if (dir === "up" ){
          this.setState({
            shoppingList: arraymove(shoppingList, currentIndex , currentIndex - 1) 
          }) 
        }

      }

      render() {
        return( 
          <div>
            <h1>UNUM Challenge</h1>
            <ol>
              {this.state.shoppingList.map((item, index) =>
                    (<li data-index = {index} key={index}>
                    {item}
                    <div className='controls'>
                      <button 
                        disabled={index === 0} 
                        onClick={ () => this._handleItemSort("up", index) }>UP</button>
                      <button
                        disabled={this.state.shoppingList.length === index + 1}
                        onClick={ () => this._handleItemSort("down", index) } >DOWN</button>
                    </div>
                  </li>)
                )}
            </ol>
          </div>
        );
      }
    }

因此，当浏览器窗口底部到达“ .sticking-block”元素的底部时，我想添加类“ .sticky”，并在滚动到网页底部时使其固定。或在再次向上滚动并到达元素的先前位置时删除“ .sticky”类。视“ .block”元素的高度而定，“。sticking-block”在初始视图中是否可见。

确定这是一些高度计算。感谢您的帮助。

Answer 1

您有问题。试试这个例子。希望对您有帮助。

尝试一下：

<div class="block">some content</div>
<div class="block">some content</div>
<div class="block">some content</div>
<div class="block">some content</div>
<div class="sticking-block">
  <div class="sticky">this block sticks to the bottom</div>
</div>
<div class="block">some content</div>
<div class="block">some content</div>

.block {
    position:relative;
    width: 100%;
    background: yellow;
 }
 .sticking-block {
   position:absolute;
   bottom:0;
   left:0;
   width: 100%;
   height: 30px; 
   background: red;
 }
 .sticking-block .sticky {
   position: fixed;
   bottom: 0;
   width: 100%;
   z-index: 999;
 }

Answer 2

您可以使用jQuery轻松地做到这一点。这是解决方案。请检查。

    <html>
  <head></head>
  <body>


<style>
  .block {
    width: 100%;
    height: 500px;
    /* Height will be dynamic. It's just to test when element is not visible on initial view */
    background: yellow;
  }
  
  .sticking-block {
    width: 100%;
    height 30px;
    /* Height will be dynamic */
    background: red;
  }
  
  .sticking-block.sticky {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
  }
</style>

<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>
<div class="sticking-block">this block sticks to the bottom
</div>
<div class="block">some content
</div>
<div class="block">some content
</div>
    
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>


<script>
  var $sticky = $('.sticking-block');
  var stickytop = $sticky.offset().top;
  
  $(window).scroll(function(){
    var scroll = $(window).scrollTop() + $(window).height();
    
    if (scroll >= stickytop) $sticky.addClass('sticky');
    else $sticky.removeClass('sticky');
  });
</script>
  </body>
</html>

如何使用jQuery使元素停留在屏幕底部？

2 个答案: