问题

I'm trying to hide the arrow that appears on top of selected header as shown below.

on scroll I'm trying to hide when the arrow appears on the header Company as the first column is sticky.

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

I'm wondering if this is the right approach to do as this needs to create a div that needs to occupy space to hide the arrow on scroll.

<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>

Please find the working plunker here

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

 <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>

答案1

得分: 1

我希望您可以接受使用jQuery。

    $(window).scroll(function() {
        var scrollVal = $(this).scrollLeft();   // 滚动窗口的滚动值（以像素为单位）。
        if (scrollVal > 150) {
            $('.arrow-position').css({'display':'none'});
        } else {
            $('.arrow-position').css({'display':'block'});
        }
    });
});```
PS：请将**$(window)**设置为**您要滚动的内容，例如.table**，并且将静态的150滚动值更改为适合您的值。
希望对您有帮助！

<details>
<summary>英文:</summary>

I hope you&#39;re okay with the use of jquery.
```$(document).ready(function() {
		$(window).scroll(function() {
		var scrollVal = $(this).scrollLeft();   //the scrolled window value in px.
					if ( scrollVal &gt; 150 ) {
					     $(&#39;.arrow-position&#39;).css({&#39;display&#39;:&#39;none&#39;});
					} else {
					    $(&#39;.arrow-position&#39;).css({&#39;display&#39;:&#39;block&#39;});
					}
				});
			});

PS: Kindly set $(window) to whatever you are going to scroll i.e. .table i think and also change static 150 scroll value to whatever suits you.
Hope It helps!!

答案2

得分: 0

I don't believe you can get that done smoothly without Jquery.
so here's an answer including Jquery. This way you can also adjust where you would like the arrow to fade out.

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);
});

Adjusted from this Codepen

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;
}

$(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);
})*/