Fixed panel in the "fonde" of the screen (responsive)

Question

Fixed panel in the "fonde" of the screen (responsive)

Navigation

#1 by (1 votes)

0

I'm setting up a website with angular2 and css. In a view, have 1 grid and I need to add in the bottom of the screen a panel of actions that is always fixed below (it has to be responsive). I did that with this code:

<div style="position: fixed; bottom: 0px; width: 100%; height: 60px; background-color: black;">
    Panel de Acciones
</div>

Now ... with that, when I scroll in the grid, everything goes well and the grid "always goes under" as I need it. The problem is when it reaches the bottom, that the footer of the page is mixed with the fixed panel ... I would need that when this happens, the panel will raise X pixels (those that occupy the footer) so that the panel is left and the footer below. Can any clue give me ??? Thanks

css3 angularjs-2.0 scss

asked by Emiliano Torres 08.04.2017 в 22:45

source

1 answer

Problems when doing an INSERT with php Validation in C ++

score 1 · Accepted Answer

What you have to do is add a handler for the scroll event and be aware when the scroll reaches the end of the document. When this happens, you show the footer and upload the panel. When the scroll is raised, it returns to its natural state.

Example

window.onscroll = function() {
  const scrollTop = window.scrollY;
  const height = window.innerHeight;
  const winScrollHeight = scrollTop + height;
  const body = document.body;
  const html = document.documentElement;
  const panel = document.querySelector('.panel');
  const footer = document.querySelector('.footer');

  const docHeight = Math.max(
    body.scrollHeight, body.offsetHeight,
    html.clientHeight, html.scrollHeight, html.offsetHeight
  );
  const isAtBottom = winScrollHeight === docHeight;
  const isFooterVisible = footer.classList.contains('visible');

  if (isAtBottom && !isFooterVisible) {
    footer.classList.add('visible');
    panel.style.bottom = '60px';
  }

  if (!isAtBottom && isFooterVisible) {
    footer.classList.remove('visible');
    panel.style.bottom = '0px';
  }
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.content {
  background-color: coral;
  height: 1200px;
  margin: 0 auto;
  width: 100px;
}

.panel {
  background-color: #2980b9;
  bottom: 0;
  height: 80px;
  position: fixed;
  width: 100%;
}

.footer {
  background-color: #313131;
  bottom: 0;
  display: none;
  height: 60px;
  position: fixed;
  width: 100%;
}

.footer.visible {
  display: block;
}

<article class="content"></article>
<div class="panel"></div>
<footer class="footer"></footer>