当文本进入其他文本移动时

时间：2017-01-04 23:10:21

标签： jquery html css

当您向下滚动时会出现一个徽标，但该徽标旁边的文字会在淡入时移动。是否有另一种方法来修复它而不是“position：absolute;” ？ 因此，文本必须保持在开头的位置。

JS：

$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position', 'fixed').css('top', '0').css('margin-top', '0').css('z-index', '500').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);


function stickIt() {

  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;

  if ($(window).scrollTop() >= (orgElementTop)) {

    orgElement = $('.original');
    coordsOrgElement = orgElement.offset();
    leftOrgElement = coordsOrgElement.left;
    widthOrgElement = orgElement.css('width');
    $('.cloned').css('left', leftOrgElement + 'px').css('top', 0).css('width', widthOrgElement).show();
    $('.original').css('visibility', 'hidden');
  } else {
    $('.cloned').hide();
    $('.original').css('visibility', 'visible');
  }
}



$(document).ready(function() {
  $('.logo').hide();
});
$(document).scroll(function(e) {
  if (document.body.scrollTop >= 76) {
    $('.logo').fadeIn();
  } else {
    $('.logo').fadeOut();
  }
});
body,
head {
  padding: 0px auto;
  margin: 0px auto;
  width: 100%;
  height: 3000px;
}
#head {
  background-color: white;
  color: white;
  padding-left: 30px;
  padding-bottom: 8px;
  padding-top: 8px;
}
.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #3279B8;
  color: #fff;
  padding-left: 30px;
  padding-bottom: 0px;
  padding-top: 4px;
  font-family: Raleway-Regular;
  font-size: 23px;
}
.nav a {
  display: inline-block;
  padding: 15px 30px 15px 30px;
}
.nav li {
  display: inline;
}
.menu a {
  display: inline-block;
  text-decoration: none;
}
.menu a:after {
  content: "";
  display: block;
  width: 100%;
  opacity: 0;
  border-bottom: 2px solid #ffffff;
  padding-bottom: 1px;
  margin: 0 auto;
  transition: all 0.3s linear 0s;
}
.menu a:hover:after {
  opacity: 1;
}
.logo {
  position: relative;
}
.link {
  margin-left: 35%;
  color: #fff;
}

a {
  color: #fff;
  }

Fonts:(I know they fucked up...)

@font-face {
  font-family: Kaushan Script;
  src: url(font/KaushanScript.otf);
}
@font-face {
  font-family: Quicksand-Regular;
  src: url(font/Quicksand-Regula
    r.ttf);
}
@font-face {
  font-family: Quicksand-Bold;
  src: url(font/Quicksand-Bold.ttf);
}
@font-face {
  font-family: Quicksand-Light;
  src: url(font/Quicksand-Light.ttf);
}
@font-face {
  font-family: Raleway-Regular;
  src: url(font/Raleway-Regular.ttf);
}
@font-face {
  font-family: Raleway-ExtraLight;
  src: url(font/Raleway-ExtraLight.ttf);
}
@font-face {
  font-family: Raleway-Light;
  src: url(font/Raleway-Light.ttf);
}
@font-face {
  font-family: Raleway-Medium;
  src: url(font/Raleway-Medium.ttf);
}
#font1 {
  font-family: Kaushan Script;
  font-size: 40px;
  color: #3279B8;
}
#font1-1 {
  font-family: Kaushan Script;
  font-size: 32px;
  color: #ffffff;
}
#font2 {
  font-family: Quicksand-Bold;
  font-size: 35px;
  margin-left: 8px;
  color: #A3A3A3;
}
#font2-2 {
  font-family: Quicksand-Bold;
  font-size: 32px;
  margin-left: 8px;
  color: #A3A3A3;
}
#font3 {
  font-family: Quicksand-Light;
  font-size: 30px;
  color: #3F3F3F;
}
#font4 {
  font-family: Raleway-ExtraLight;
  font-size: 22px;
  color: #3F3F3F;
}
#Bla {
  float: right;
  padding-top: 9px;
  padding-right: 30px;
}
<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<body style="background-color: white;">

  <div class="w3-container w3-xlarge" id="head">
    <h id="font1">Loftus</h>
    <h id="font2">DENTAL</h>

    <div id="Bla">
      <h id="font3">Bla</h>
      <h id="font4">&</h>
      <h id="font3">bla</h>
    </div>
  </div>

  <div class="menu">
    <ul class="nav">
      <h class="logo">
        <h id="font1-1">Loftus</h>
        <h id="font2-2">DENTAL</h>
      </h>
      <h class="link">
        <li> <a href="#">Home</a>
        </li>
        <li> <a href="#">Photo's</a>
        </li>
        <li> <a href="#">Contact</a>
        </li>
      </h>
    </ul>
  </div>

  <div style="width:100%; height:100%; background-color: white;">
    Hi
    <br>
    Hi
    <br>
    Hi
    <br>
    Hi
    <br>
     Hi
    <br>
    Hi
    <br>
    Hi
    <br>
    Hi
    <br>
     Hi
    <br>
    Hi
    <br>
    Hi
    <br>
    Hi
    <br>
     Hi
    <br>
    Hi
    <br>
    Hi
    <br>
    Hi
    <br>
     Hi
    <br>
    Hi
    <br>
    Hi
    <br>
    Hi
    <br>
     
  </div>

  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

</body>

1 个答案:

答案 0 :(得分：1)

最好通过添加position: absolute或其他内容使徽标远离流量，以使其保持其位置，而不会打扰文本。显然，在较小的设备中，你不能拥有它，因为它会通过重叠来搞乱布局。

这是我在CSS中添加的内容：

.logo {
  position: absolute;
}
@media screen and (max-width: 500px) {
  .logo {
    position: static;
  }
}

请参阅我的解决方案：

$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position', 'fixed').css('top', '0').css('margin-top', '0').css('z-index', '500').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);


function stickIt() {

  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;

  if ($(window).scrollTop() >= (orgElementTop)) {

    orgElement = $('.original');
    coordsOrgElement = orgElement.offset();
    leftOrgElement = coordsOrgElement.left;
    widthOrgElement = orgElement.css('width');
    $('.cloned').css('left', leftOrgElement + 'px').css('top', 0).css('width', widthOrgElement).show();
    $('.original').css('visibility', 'hidden');
  } else {
    $('.cloned').hide();
    $('.original').css('visibility', 'visible');
  }
}

$(document).ready(function() {
  $('.logo').hide();
});
$(document).scroll(function(e) {
  if (document.body.scrollTop >= 76) {
    $('.logo').fadeIn();
  } else {
    $('.logo').fadeOut();
  }
});
body,
head {
  padding: 0px auto;
  margin: 0px auto;
  width: 100%;
  height: 3000px;
}
#head {
  background-color: white;
  color: white;
  padding-left: 30px;
  padding-bottom: 8px;
  padding-top: 8px;
}
.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #3279B8;
  color: #fff;
  padding-left: 30px;
  padding-bottom: 0px;
  padding-top: 4px;
  font-family: Raleway-Regular;
  font-size: 23px;
}
.nav a {
  display: inline-block;
  padding: 15px 30px 15px 30px;
}
.nav li {
  display: inline;
}
.menu a {
  display: inline-block;
  text-decoration: none;
}
.menu a:after {
  content: "";
  display: block;
  width: 100%;
  opacity: 0;
  border-bottom: 2px solid #ffffff;
  padding-bottom: 1px;
  margin: 0 auto;
  transition: all 0.3s linear 0s;
}
.menu a:hover:after {
  opacity: 1;
}
.logo {
  position: relative;
}
.link {
  margin-left: 35%;
  color: #fff;
}

a {
  color: #fff;
  }

Fonts:(I know they fucked up...)

@font-face {
  font-family: Kaushan Script;
  src: url(font/KaushanScript.otf);
}
@font-face {
  font-family: Quicksand-Regular;
  src: url(font/Quicksand-Regula
    r.ttf);
}
@font-face {
  font-family: Quicksand-Bold;
  src: url(font/Quicksand-Bold.ttf);
}
@font-face {
  font-family: Quicksand-Light;
  src: url(font/Quicksand-Light.ttf);
}
@font-face {
  font-family: Raleway-Regular;
  src: url(font/Raleway-Regular.ttf);
}
@font-face {
  font-family: Raleway-ExtraLight;
  src: url(font/Raleway-ExtraLight.ttf);
}
@font-face {
  font-family: Raleway-Light;
  src: url(font/Raleway-Light.ttf);
}
@font-face {
  font-family: Raleway-Medium;
  src: url(font/Raleway-Medium.ttf);
}
#font1 {
  font-family: Kaushan Script;
  font-size: 40px;
  color: #3279B8;
}
#font1-1 {
  font-family: Kaushan Script;
  font-size: 32px;
  color: #ffffff;
}
#font2 {
  font-family: Quicksand-Bold;
  font-size: 35px;
  margin-left: 8px;
  color: #A3A3A3;
}
#font2-2 {
  font-family: Quicksand-Bold;
  font-size: 32px;
  margin-left: 8px;
  color: #A3A3A3;
}
#font3 {
  font-family: Quicksand-Light;
  font-size: 30px;
  color: #3F3F3F;
}
#font4 {
  font-family: Raleway-ExtraLight;
  font-size: 22px;
  color: #3F3F3F;
}
#Bla {
  float: right;
  padding-top: 9px;
  padding-right: 30px;
}
.logo {
  position: absolute;
}
@media screen and (max-width: 500px) {
  .logo {
    position: static;
  }
}
<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="w3-container w3-xlarge" id="head">
  <h id="font1">Loftus</h>
  <h id="font2">DENTAL</h>

  <div id="Bla">
    <h id="font3">Bla</h>
    <h id="font4">&</h>
    <h id="font3">bla</h>
  </div>
</div>

<div class="menu">
  <ul class="nav">
    <h class="logo">
      <h id="font1-1">Loftus</h>
      <h id="font2-2">DENTAL</h>
    </h>
    <h class="link">
      <li> <a href="#">Home</a></li>
      <li> <a href="#">Photo's</a></li>
      <li> <a href="#">Contact</a></li>
    </h>
  </ul>
</div>

  

注意：最好不要将W3Schools的CSS热链接。

输出：http://output.jsbin.com/kaqijohayo

相关问题
最新问题