How to Add a Top and Bottom Shadow While Scrolling But Only When Needed

How do I add a top and bottom shadow while scrolling but only when needed?

I think your looking for something like this;

Reference : LINK

html {  background: white;  font: 120% sans-serif;}
.scrollbox {  overflow: auto;  width: 200px;  max-height: 200px;  margin: 50px auto;  background: /* Shadow covers */  linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */  radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;  background: /* Shadow covers */  linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */  radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;  background-repeat: no-repeat;  background-color: white;  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;  /* Opera doesn't support this in the shorthand */  background-attachment: local, local, scroll, scroll;}

<div class="scrollbox">  <ul>    <li>I Show Below Shadow. Go Down Now</li>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>    <li>7</li>    <li>8</li>    <li>9</li>    <li>10</li>    <li>11</li>    <li>12</li>    <li>13</li>    <li>14</li>    <li>15</li>    <li>16</li>    <li>17</li>    <li>18</li>    <li>19</li>    <li>20</li>    <li>The end!</li>    <li>No shadow here. See Above. Go Up</li>  </ul></div>

Add bottom box shadow to the menu on scrollup and scrolldown

$(window).scroll(function() {         var scroll = $(window).scrollTop();    if (scroll > 0) {        $("#header").addClass("active");    }    else {        $("#header").removeClass("active");    }});

body {    height: 2000px;    margin: 0;}
body > #header{position:fixed;}
#header {    width: 100%;    position: fixed;    z-index:9000;    overflow: auto;    background: #e6e6e6;    text-align: center;    padding: 10px 0;    transition: all 0.5s linear;}
#header.active {     box-shadow: 0 0 10px rgba(0,0,0,0.4);   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">HEADER</div>

How does this scrolling shadows CSS-magic work?

How can the white shadows cover the black ones while the content behind them stays visible?

The content isn't behind them, the content is above which is logical since the content is always above the background. The use of black coloration on the shadow which is the same as text coloration make you think that the shadow is above but it's not.

How are gradients placed by putting percentages after the declaration (linear-gradient(...) n% n%)?

0% 100% means left 0% top 100% which is the same as left bottom and since the background is having a width equal to 100% (set with background-size) it's also the same as bottom (related for full detail: Using percentage values with background-position on a linear-gradient)

.scrollbox {
  overflow: auto;
  width: 200px;
  max-height: 150px;
  background: 
    /* Shadow covers */
    linear-gradient(white 30%, transparent), 
    linear-gradient(transparent, white 70%) bottom,

    /* Shadows */
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), 
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) bottom;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
}

<div class="scrollbox">
  <ul>
    <li>Ah! Scroll below!</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>The end!</li>
    <li>No shadow there.</li>
  </ul>
</div>

How to avoid table appearing during scrolling (where it is not required) when using heading with position: 'sticky'

I've made a few changes to get this right. Firstly, I think you really want the scrollbar to be on the table body, and not the bit with the header as well. This makes more sense because only the content then has a scrollbar. It also has the affect the header is no longer overlaid (but it still sticks to the top) since the header is no longer part of the scroll content.

I had to add a few more class names here and there to support this change. It's admittedly very fiddly - tables are on of the more ancient parts of the HTML spec and you have to apply various tricks with tricking the rows/header etc to lay out properly with display: table in a few places -- since to put the scroll on the tbody you have to make that display: block and that would otherwise mess up the table/cell layout.

Anyway, here it is. You will now control the height in the .TableBodyStyle which I've set to 400px for demonstration purposes.

Also here is a codesandbox: https://codesandbox.io/s/awesome-brook-i88vim

DevicesTable:

import { Table, TableBody, TableContainer } from "@mui/material";
import DevicesTableHeader from "./DevicesTableHeader";
import DevicesTableCell from "./DevicesTableCell";

export default function DevicesTable() {
  return (
    <TableContainer className="TableContainerGridStyle">
      <Table className="TableStyle">
        <DevicesTableHeader />
        <TableBody className="TableBodyStyle">
          <DevicesTableCell />
          <DevicesTableCell />
          <DevicesTableCell />
          <DevicesTableCell />
          <DevicesTableCell />
          <DevicesTableCell />
          <DevicesTableCell />
          <DevicesTableCell />
          <DevicesTableCell />
          <DevicesTableCell />
        </TableBody>
      </Table>
    </TableContainer>
  );
}

DevicesTableCell:

import React from "react";
import { TableCell, TableRow } from "@mui/material";
import "./DataTablesStyles.css";

export default function DevicesTableCell() {
  return (
    <TableRow className="TableCellStyle">
      <TableCell>Some Text</TableCell>
      <TableCell>Some Text</TableCell>
      <TableCell>Some Text</TableCell>
      <TableCell>Some Text</TableCell>
      <TableCell>Some Text</TableCell>
      <TableCell>Some Text</TableCell>
      <TableCell>Some Text</TableCell>
      <TableCell>Some Text</TableCell>
    </TableRow>
  );
}

DevicesTableHeader:

import "./DataTablesStyles.css";
import { TableCell, TableHead, TableRow } from "@mui/material";

export default function DevicesTableHeader() {
  return (
    <TableHead
      sx={{
        display: "table",
        tableLayout: "fixed",
        width: "100%"
      }}
    >
      <TableRow className="TableRowStyle">
        <TableCell className="TableHeaderStyle">Actions</TableCell>
        <TableCell className="TableHeaderStyle">Status</TableCell>
        <TableCell className="TableHeaderStyle">Device ID</TableCell>
        <TableCell className="TableHeaderStyle">Model</TableCell>
        <TableCell className="TableHeaderStyle">
          Operation<br></br>System
        </TableCell>
        <TableCell className="TableHeaderStyle">
          Api<br></br>level
        </TableCell>
        <TableCell className="TableHeaderStyle">Last activity</TableCell>
        <TableCell className="TableHeaderStyle"></TableCell>
      </TableRow>
    </TableHead>
  );
}

The CSS:

.TableContainerGridStyle {
  overflow: visible !important;
}

.TableStyle {
  display: block;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  align-items: center;
  justify-content: flex-end;
  min-width: 750px;
  box-shadow: 0px 0px 10px 0.1px rgba(124, 159, 236, 0.3);
}

.TableHeaderStyle {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.4px;
  color: black;
  background-color: #eaecf4;
  padding: 2px 16px;
}

.TableHeaderStyle:first-child {
  border-top-left-radius: 8px;
  padding: 2px 16px;
}

.TableHeaderStyle:last-child {
  border-top-right-radius: 8px;
  padding: 2px 25px 2px 22px;
}

.TableCellStyle {
  border-top: 2px solid #eaecf4;
  border-bottom: 1.1px solid #eaecf4;
  background-color: #ffffff;
  display: table;
  table-layout: fixed;
  width: 100%;
}

tr.TableCellStyle {
  display: table;
}

.TableCellStyle td:last-child {
  padding-right: 22px;
}

.TableBodyStyle {
  display: block !important;
  overflow: overlay;
  table-layout: fixed;
  max-height: 400px;
}

.TableBodyStyle tr:first-child {
  border-top: 0;
}

.TableBodyStyle tr:last-child {
  border-bottom: 0;
}

How to change appearance of position: sticky element ONLY when the user starts scrolling and its stickiness becomes apparent?

Simply put your style in a class and toggle this class in your HTML

//Simply with jQuery
$(window).scroll(function () {
   if ($(this).scrollTop() > 150) {
      $('.element').addClass('your_class_name');
   } else {
      $('.element').removeClass('your_class_name');
   }
});

//With JavaScript
window.onscroll = function() {
if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
    document.querySelector(".element").classList.add("your_class_name");
  } else {
    document.querySelector(".element").classList.remove("your_class_name");
  }
};

This will add class if user scrolled over 150px

CSS Box Shadow Bottom Only

Do this:

box-shadow: 0 4px 2px -2px gray;

It's actually much simpler, whatever you set the blur to (3rd value), set the spread (4th value) to the negative of it.

flutter only bottom shadow to container

Material(
  elevation: 5,
  child: Container(
    height: 50,
    child: _buildEloAndLevel(),

    // add boxShadow
    decoration: BoxDecoration(
      boxShadow: [
        color: Colors.black54,
        blurRadius: 15.0,
      ],
    ),
  ),
),

This will create a shadow of 15 units arounds the Container. Now, the shadow can be moved with the offset property. Since, we don't want shadow on top, we can move it down by 15 units.

Material(
  elevation: 5,
  child: Container(
    height: 50,
    child: _buildEloAndLevel(),

    // add boxShadow
    decoration: BoxDecoration(
      boxShadow: [
        color: Colors.black54,
        blurRadius: 15.0,
        offset: Offset(0, 15), // horizontally move 0, vertically move 15,
      ],
    ),
  ),
),

---

Related Topics