Is there a more effective method for concealing arrows while scrolling?

I'm attempting to conceal the arrow that appears above the selected header, as depicted below. https://i.stack.imgur.com/wyxdF.png

While scrolling, I aim to hide the arrow that appears on the header Company, especially when the first column is sticky.

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

I am pondering if this approach is correct, since it necessitates creating a div to take up space for hiding the arrow during 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>

You can access the functional plunker here

htmlcsshtml-tablescroll

Answer №1

Just checking in to see if you're comfortable using 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: Please remember to change $(window) to whatever element you are scrolling, like .table and adjust the static scroll value of 150 to fit your needs. Hope this tip proves useful!

Answer №2

I am of the opinion that achieving a smooth effect without using Jquery might be quite challenging. Therefore, I have provided a solution below which incorporates Jquery. This approach allows you to customize the fading out of the arrow as per your requirements.

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

Adapted from this Codepen

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the impact of hash urls on SEO?

Looking for back button support options? Check out some recommended plugins here. However, considering that the page loads via JavaScript based on hash tags, can this impact search indexing by Yahoo/Google/Bing? I am contemplating using HTML5 state push fo ...

phpjqueryajaxhtmlseo

Removing a section of HTML from an EmailMessage Body in EWS

Is there a way to remove certain parts of the EWS EmailMessage .Body.Text value in C# before replying with a ResponseMessage? The elements that need to be removed include clickable and non-clickable buttons in HTML format. Since custom tags cannot be dec ...

c#htmlcssexchangewebservices

Is it possible to include aria-controls in an anchor tag?

My primary navigation includes some elements that may have a secondary navigation. In order to optimize accessibility on my website, I am seeking the most effective way to show/hide the secondary nav. After brainstorming, here is what I have come up with: ...

htmlaccessibilitywai-aria

Web page saving fails to preserve images!

Currently working on a PHP-based website that is utilizing the Zend framework and hosted on an Apache server. The folder structure within my www directory looks like this: +www | |_+css | | | |_images | |_js | |_images The issue I'm ...

phpcssimagezend-frameworkdownload

Creating a Form with HTML and CSS

I am currently working on setting up a banner that includes an overlay with a cutout. Beneath the overlay, there is an image. My goal is to create this design using HTML and CSS. I have been experimenting with pseudo-elements but I am having difficulty re ...

htmlcsspseudo-element

Duplicate table row and insert new cell

I am currently attempting to duplicate a row from one table into a new table and then include an additional td at the end of the copied row containing a delete button. Thus far, I have successfully duplicated the row but am struggling to find a method for ...

jqueryhtmlcss

Using JQuery Datatables to output HTML based on JavaScript conditional logic

I am presently working on a project that involves using JQuery Datatables to display my data. Within this project, I am utilizing the datatables render method to format the data before it is displayed. However, I have encountered a challenge where I need t ...

javascriptjqueryhtmlcodeigniterdatatable

I can't seem to shake off this constant error. Uncaught TypeError: Unable to access property 'classList' of null

I am facing an issue with the "Contact Me" tab as it does not display its content when clicked. Here is the code snippet: <body> <ul class="tabs"> <li data-tab-target="#home" class="active tab">Home< ...

javascripthtmlcss

bespoke design picture holder

Is it possible to create a custom-shaped image container without using <div />? I encounter an issue when trying to add corners on top of the #content-box as shown in this screenshot: . The corner images only cover half of the block element, with th ...

csshtml

Can someone explain how I can use Selenium and Python to choose an available date using a calendar picker?

Having a class named .calendarCellOpen: table.calendario .calendarCellOpen input { } This is the CSS for the calendar: #calwrapper { min-height:230px; margin-top:10px; } #calendar{ float:left; marg ...

pythonhtmlcssseleniumtesting

Display the output based on checkbox selection using JavaScript

I am working on a feature where I need to capture checkbox inputs using JavaScript and then store them in a PHP database. Each checkbox corresponds to a specific column in the database. If a checkbox is checked, I want to insert its value into the databa ...

javascriptphphtmlcheckbox

Apply an opacity setting of 0.5 to the specific segment representing 30% of the scrollable div

I have a scrollable container for displaying messages. I would like to apply an opacity of 0.5 to the content in the top 30% of the container, as shown in this image: https://i.stack.imgur.com/NHlBN.png. However, when I tried using a background div with a ...

javascripthtmlcssreactjs

ng2-table ways to customize the appearance of a particular row

Hey there, I'm currently new to Angular 2 and working with ng2-table. I've successfully added a table like the one shown here to my website. Now, I'm trying to figure out how to add color to specific rows within the table. Following the ste ...

htmlcssangulartypescriptng2-bootstrap

The symbol "#" appears in my URL whenever the link is clicked

Seeking guidance on a URL issue that I am facing. Whenever I click the source link, it adds a pound sign to the URL. How can I prevent this from happening? Can someone assist me in identifying the necessary changes required in my jQuery or HTML code? Bel ...

javascriptjqueryhtml

What is the best method for choosing the next item with jQuery?

I am facing an issue while trying to apply some design on the next element. The error message that I am encountering is: Error: Syntax error, unrecognized expression: [object Object] > label Below are my selections for browsing by category: BROWSE BY ...

javascriptjquerycss

What causes the CSS height attribute to mess up UL lists?

I'm struggling to understand a problem in my nested list. When I set the height of LI elements, they end up overlapping each other. Can someone explain why this is happening and suggest a proper way to apply height without causing this overlap effect? ...

htmlcsshtml-lists

What is the best way to prevent my form from saving empty values to the database?

I am currently working on a project for managing library resources using HTML5, PHP, and SQL. I have implemented form validation using PHP for fields such as email, password, name, surname, and phone number. The validation seems to work visually, but it st ...

phphtmlsqlformsvalidation

Positioning of Responsive Slider

I'm currently working on a responsive website, but I am facing challenges with the placement of the slideshow dots. When I switch to the device toolbar, they seem to change position. I have tried various methods such as using relative and absolute uni ...

javascripthtmlcss

Attempting to change the background color of a table row when hovering in React, but experiencing no success

Describing the appearance of my table row: <tr onMouseEnter={() => {this.buttonIsHovered = true} } onMouseLeave={() => {this.buttonIsHovered = false}} className={this.buttonIsHovered ? 'hover' : null}> The initial value ...

javascriptcssreactjs

How to target the following sibling element (not a child) with CSS

I am working with the following HTML structure: <div class="col-sm-12"> <input id="my_id"> <div class="col-sm-1 col-3-box" style="position:absolute; margin-left:340px;"> </div> </div> How can I target and change ...

htmlcss