隐藏滚动箭头 - 更好的方法？

Posted 2023-03-06

【中文标题】隐藏滚动箭头 - 更好的方法？

【英文标题】：Hiding arrow on scroll- Better approach?

【发布时间】：2020-04-21 23:15:07

【问题描述】：

我正在尝试隐藏显示在所选标题顶部的箭头，如下所示。

在滚动时，当箭头出现在标题 Company 上时，我试图隐藏，因为第一列是粘性的。

.hide-arrow
    height: 19px;
    width: 91px;
    z-index: 9999 !important;
    position: sticky;
    left: 3px;
    opacity: unset;
    background: white;

我想知道这是否是正确的做法，因为这需要创建一个 div 需要占用空间来隐藏滚动箭头。

 <tr>
        <div class="hide-arrow"></div>
        <th style="left:3px">Company</th>
        <th>Contact
          <div class="arrow-position">
          <span class="module-img"> <i class="icon-long-arrow-down"></i>
          </span>
          </div>
        </th>
        <th>Country</th>
        <th>Code</th>
        <th>Language</th>
        <th>Country</th>
        <th>Code</th>
        <th>Language</th>
      </tr>

请找到工作人员here

【参考方案1】：

我希望你对 jquery 的使用没问题。

        $(window).scroll(function() 
        var scrollVal = $(this).scrollLeft();   //the scrolled window value in px.
                    if ( scrollVal > 150 ) 
                         $('.arrow-position').css('display':'none');
                     else 
                        $('.arrow-position').css('display':'block');
                    
                );
            );

PS：请将 $(window) 设置为 您要滚动的任何内容，即我认为的 .table，并将静态 150 滚动值更改为适合的内容你。 希望有帮助！！

【讨论】：

我想将此功能集成到打字稿中。所以不确定我是否能够使用此代码，因为它是 jQuery。

【参考方案2】：

我不相信没有 Jquery 就可以顺利完成。 所以这是一个包括Jquery的答案。这样，您还可以调整希望箭头淡出的位置。

html：

<div class="top"><div class="title">↓</div></div>

CSS：

body 
  margin: 0;
  height: 1000px;


.top 
  margin: 0;
  position: relative;
  width: 100%;
  height: 300px;
  opacity: 1;
  text-align: center;
  font-size: 30px;
  font-weight: 100;
  color: #000;


.title 
position: absolute;
top: 60%;
left: 100px;

JQuery:

$(window).scroll(function()
$(".top").css("opacity", 1 - $(window).scrollTop() / 250);
);

/*win.scroll(function()
scrollPosition = win.scrollTop();
scrollRatio = 1 - scrollPosition / 300;
$(".top").css("opacity", scrollRatio);
*/

/*$(window).scroll(function()
var scrollVar = $(window).scrollTop();
$('.top').css("opacity", 1 - scrollVar/300);
)*/

从this Codepen调整