Clever Geek Handbook

Fixed bar script makes slideshow "jump" - how to remove?

I couldn't find a better item because its a specific error of my site that I provided a link to see it and its code.

The problem is when I scroll, there is a script, when the bar touches the top of the browser, the bar will stay there, but this makes the slideshow make a small jump, and the bars cut off the slideshow part.

See it here: http://optential.co.nf/

Code:

$(window).bind('scroll', function () {
  var h = $('.header').height();
  if ($(window).scrollTop() > h) {
    $('.mail2, .optimize').addClass('fixed');
    
  } else {
    $('.mail2, .optimize').removeClass('fixed');
  }
});
      

        
        
        
      

    
html,
body { height: 100%; }

body {
  margin: 0;
  font-family: 'Open Sans', Helvetica, sans-serif;
  min-width: 900px;
}

.header {
  background-image: url("img/fundo1.jpg");
  background-color: rgb(21, 21, 21);
  background-size: cover;
  color: white;
  height: 100%;
  min-height: 650px;
  position: relative;
}

.header .logo {
  width: 230px;
  height: 60px;
  margin: 20px 8px 8px 6%;
}

.header .menu {
  position: absolute;
  top: 55px; right: 25px;
}

.header .menu a {
  margin: 0 4px;
  font-size: 15px;
  color: white;
  text-decoration: none;
  padding: 6px 20px;
}

.header .menu a:hover,
.header .menu a.current {
  color: rgb(204, 66, 63);
}

.header .move {
  color: white;
  width: 40%;
  margin: 0;
  padding: 10px;
}

.header .move .center {
  margin: 260px auto 0;
  width: 360px;
}

.header .move h1 {
  font-weight: 400;
  font-size: 38px;
  margin: 6px 0;
}

.header .move p {
  font-weight: 300;
  font-size: 20px;
  border-top: 2px solid white;
  margin: 6px 0;
  padding-top: 6px;
}

.header .mail1 {
  background-image: url("img/email.png");
  background-size: contain;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  width: 560px; height: 560px;
  position: absolute;
  bottom: 0; right: 0;
}

.header .mail1 form {
  position: absolute;
  width: 240px;
  bottom: 220px; right: 155px;
}

.header .mail1 h1 {
  font-weight: 300;
  text-align: center;
  color: rgb(203, 41, 37);

}
.header .mail1 input {
  box-sizing: border-box;
  width: 100%;
  font-family: 'Open Sans', Helvetica, sans-serif;
  padding: 8px;
  border: 1px solid rgb(219, 219, 218);
  border-radius: 6px;
  margin-bottom: 12px;
 }

.header .mail1 input:hover {
  border: 1px solid rgb(189, 189, 188);
}

.header .mail1 input:focus {
  outline: 0;
}

.header .mail1 a {
  display: block;
  color: white;
  text-decoration: none;
  background-color: rgb(204, 66, 63);
  border-radius: 6px;
  text-align: center;
  padding: 8px;
  font-size: 14px;
}

.header .mail1 a:hover {
  background-color: rgb(224, 86, 83);
}

.mail2 {
  box-shadow: 10px 6px 15px grey;
  background-color: white;
  background-image: url("img/barra.png");
  background-position: 12% 0%;
  height: 100px;
  background-repeat: no-repeat;
  text-align: right;
}

#btn {
    width: 10em; 
  }

.mail2.fixed {
  box-shadow: 10px 6px 15px grey;
  position: fixed;
  display:block;
  top: 0; left: 0;
  width: 100%;
  min-width: 800px;
  height: 100px;
  z-index: 1;
}

.mail2 form {
  display: inline-block;
  margin: 30px 0;
  padding: 0 10px;
  width: 600px;
}

.mail2 h1 {
  font-weight: 300;
  color: rgb(203, 41, 37);
  display: inline;
  vertical-align: middle;
  font-size: 28px;
}

.mail2 input {
  box-sizing: border-box;
  width: 220px;
  font-family: 'Open Sans', Helvetica, sans-serif;
  padding: 8px;
  border: 1px solid rgb(219, 219, 218);
  border-radius: 6px;
  margin: 0 6px;
}

.mail2 input:hover {
  border: 1px solid rgb(189, 189, 188);
}

.mail2 input:focus {
  outline: 0;
}

.mail2 a {
  display: inline;
  color: white;
  text-decoration: none;
  background-color: rgb(204, 66, 63);
  border-radius: 6px;
  text-align: center;
  padding: 8px 4%;
  font-size: 14px;
}

.mail2 a:hover {
  background-color: rgb(224, 86, 83);
}

.mail2 .top {
  padding: 8px 6px;
  background-color: rgb(51, 51, 51);
}

.mail2 .top:hover {
  background-color: rgb(71, 71, 71);
}

#slider {
  position:relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#slider .images { 
  width: 100%;
  position: relative;
  transition: left 1s;
  left: 0;
}

#slider .images img {
  z-index: -1;
  width: 100%;
  background-size: cover;
  position: absolute;
}

.controls {
  width:100%;
  width: 350px;
  margin: 5px auto;
  display: flex;
  justify-content: center;
}

.controls div {

  width: 16px;
  height: 16px;
  margin: 0 5px;
  background: tomato;
  border-radius: 50%;
}

.controls .current {
  background: red;
}

.barra2 {
  background-image: url('img/barra2.png');
  background-size: cover;
  padding-bottom: 21.6%;
}

.mobile {
  background-image: url("img/fundos.jpg");
  background-size: cover;
  background-color: rgb(171, 171, 171);
  color: white;
  padding-bottom: 44.4%;
  position: relative;
}

#pc {
  height: 600px;
  width: 50%;
  float: left;
  background-size: 100%
  background-repeat:no-repeat;
  background-image: url("img/pc.jpg");
}

#pctexto {
  height: 600px;
  width: 50%;
  float: left;
  background-size: cover;
  background-color: blue;
}
.mobile .invisi {
  position: absolute;
  width: 13%;
  height: 10%;
  bottom: 14%;
  border-radius: 8px;
}
.mobile .invisi:hover {
  background: white;
  opacity: 0.2;
}

.mobile .appstore {
  right: 26.5%;
}

.mobile .googleplay {
  right: 11.5%;
}

.contact {
  background-image: url("img/fundo2es.jpg");
  background-size: 100%;
  background-color: rgb(21, 21, 21);
  background-repeat: no-repeat;
  height:100%;
  color:white;
}

.contact .textocon {
  text-align: right;
  padding: 55px 75px 0 0;
}

.contact .textocon div {
  display: inline-block;
  width: 290px
}

.contact .textocon h1 {
  font-weight: 400;
  font-size: 42px;
  margin: 6px 0;
}

.contact .textocon p {
  font-weight: 300;
  font-size: 19px;
  border-top: 2px solid white;
  margin: 6px 0;
  padding-top: 6px;
}

.contact .col1 {
  display: inline-block;
  vertical-align: top;
  width: 410px;
  padding: 10px 6px 10px 60px;
}

.contact .col1 h1 {
  font-weight: 300;
  font-size: 25px;
  margin: 4px 0;
}

.contact .col1 input {
  width: 380px;
  height: 20px;
}

.contact .col1 input,
.contact .col2 textarea {
  font-family: 'Open Sans', Helvetica, sans-serif;
  padding: 14px;
  font-size: 13px;
  color: white;
  background-color: transparent;
  border: 1px solid rgb(172, 161, 160);
  margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
  outline: 0;
  border: 1px solid white;
}

.contact .col2 {
  display: inline-block;
  width: calc(100% - 560px);
  padding: 52px 10px 10px 0;
  text-align: right;
}

.contact .col2 textarea {
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  height: 112px;
}

.contact .col2 #btn {
  display: inline-block;
  color: white;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  background-color: rgb(204, 66, 63);
  border-radius: 4px;
  padding: 10px 0px;
  font-size: 20px;
}
.contact .col2 a:hover {
  background-color: rgb(224, 86, 83);
}

.contact .info {
  padding: 10px 60px;
  display: flex;
  justify-content: space-between;
}

.contact .info h1 {
  font-weight: 300;
  font-size: 25px;
}

.contact .info p {
  font-size: 12px;
  line-height: 12px;
}

.contact .info a {
  text-decoration: none;
  color: white;
}
.contact .info a:hover {
  color: #ddd;
}

.contact .info img {
  width: 32px;
  margin: 6px;
}
.contact .info img:hover {
  opacity: 0.8;
}
      

        
        
        
      

    
<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/fixedbar.js"></script>
    <script src="js/slider.js"></script>
    <meta charset="utf-8">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
    <link href="styles.css" rel="stylesheet" type="text/css">
    <title> Layout </title>
  </head>
  <body>


    <div class="header" id="top">
      <img class="logo" src="img/logo.png">
      <div class="menu">
        <a href="#" class="current">Home</a>
        <a href="#tour">Product Tour</a>
        <a href="#">Pricing</a>
        <a href="#">Try</a>
        <a href="#vision">Vision</a>
      </div>
      <div class="move">
        <div class="center">
          <h1>Move work forward!</h1>
          <p>Optential keeps your team organized, connected, and focused on results.</p>
        </div>
      </div>
      <div class="mail1">
        <form action="form/form.php" method="post">
          <h1>Try Now!</h1>
          <input name="Email" class="Email" type="text" placeholder="Enter your Email address ...">
          <input type="submit" value="Get started for free">
        </form>
      </div>
    </div>

    <div class="mail2">
        <form action="form/form.php" method="post">
        <h1>Try Now!</h1>
        <input type="text" placeholder="Your Email here...">
        <input type="submit" id ="btn" value="Get started for free">
        <a class="top" href="#top">Top</a>
      </form>
    </div>


    <div id="slider">
        <div class="images">
          <div class="controls">
          <img src="img/3.png" alt="Image-1" />
          <img src="img/2.png" alt="Image-2" />
          <img src="img/1.png" alt="Image-3" />
          <img src="img/4.png" alt="Image-4" />
        </div> 
      </div>
    </div>

    <div class="barra2"></div>

    <div class="mobile">
      <div id="pc"> 

      </div>

      <div id="pctexto">

      </div>
    </div>

    <div class="contact">
      <div class="textocon">
        <div>
          <h1>Optential</h1>
          <p>A new management system<br>for a new management paradigm!</p>
        </div>
      </div>
      <form method="POST" action="form/contactengine.php">
        <div class="col1">
          <h1>Contact us!</h1>
          <input type="text" name="Name" size="50" placeholder="Name"/>
          <input type="text" name="Email" size="50" placeholder="Email"/>
          <input type="text" name="Subject" size="50" placeholder="Subject"/>
        </div>
        <div class="col2">
          <textarea name="Message" rows="5" cols="70" placeholder="Message..."></textarea>
          <input type="submit" id="btn"value="Send"/>
        </div>
      </form>
      <div class="info">
        <div>
          <h1>Mail Us !</h1>
          <p>Rua Andrade Corvo, 242</p>
          <p>sala 206</p>
          <p>4700-204 Braga</p>
          <p>Portugal</p>
        </div>
        <div>
          <h1>Call Us !</h1>
          <a href="#"><p>+351 987654323</p></a>
          <a href="#"><p>+351 987654323</p></a>
          <a href="#"><p>+351 987654323</p></a>
        </div>
        <div>
          <h1>Email Us! </h1>
          <a href="#"><p>code@angel.com</p></a>
          <a href="#"><p>code_hr@angel.com</p></a>
          <a href="#"><p>code_support@angel.com</p></a>
        </div>
        <div>
          <h1>Join Us! </h1>
          <a href="#"><img src="img/facebook.png"></a>
          <a href="#"><img src="img/gplus.png"></a>
          <a href="#"><img src="img/twitter.png"></a>
          <a href="#"><img src="img/instag.png"></a>
        </div>
      </div>
    </div>
<script src="js/slider.js"></script>
  </body>
</html>
Run codeHide result


The css string is "mail2", slideshow is "slider" and "controls".

Hope someone can help.

+3


source to share


3 answers


When you apply .fixed

, you are taking the menu item from the stream. This is because it changes from position: relative

to position: fixed

. This is why the elements below it bounce 100px. To complete the effect you want, you'll need to make up for the missing 100px.

OPTION 1

You can apply margin-top

to the element #slider

below:

if ($(window).scrollTop() > h) {
   $('.mail2, .optimize').addClass('fixed');
   $('#slider').css('margin-top', '100px');

} else {
  $('.mail2, .optimize').removeClass('fixed');
  $('#slider').css('margin-top', '0px');
}

OPTION 2

You can add an element with 100px height to the flow.



In your HTML add this below the element .mail2 

<div id="menu-block" style="height: 100px; display: none;">

And add this to your JS:

if ($(window).scrollTop() > h) {
  $('.mail2, .optimize').addClass('fixed');
  $('#menu-block').css('display', 'block');

} else {
  $('.mail2, .optimize').removeClass('fixed');
  $('#menu-block').css('display', 'none');
}

In this particular case, both methods will work the same. In other situations, only one method is appropriate. Hope this helps!

+3


source


Given that the panel has a fixed height 100px

, you can add a rule like this:

.fixed + #slider {
  padding-top: 100px;
}


or if other pages have more dynamic layouts you can use .fixed + *

+2


source


This is because once you do that, position:fixed

it doesn't take up any more space on the page, so the content below it jumps in to fill the gap.

I've run into this in the past and my solution was to set another div below the bar to be fixed. It should be the same height as the div that will become fixed. Do this display:none

and then change it to display:block

when you switch the bar to be fixed, that way it appears correctly when the fixed bar stops taking up space on the page. This should stop jumping.

+2


source






More articles:


All Articles