个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 09:21:13 25 4
gpt4 key购买 nike

当您向下滚动时会出现一个 Logo ，但当它淡入时该 Logo 旁边的文本会移动。除了“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>

最佳答案

最好通过添加 position: absolute 或其他使其位置保持在外而不干扰文本的方式使 Logo 远离流。显然，在较小的设备中，您不能拥有它，因为它会因重叠而弄乱布局。

这是我在 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>

Note: It is better not to hotlink the CSS from W3Schools.

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

关于jquery - 当文本进入其他文本移动时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41474769/

25 4 0
文章推荐： python - 在 Python 的 M2Crypto 中关闭 SSLchecking
文章推荐： jquery - 使 jquery 切换 div 仅在我单击退出按钮时切换
文章推荐： python - 这是获取 'session_key' ,'uid' ,'expires' 值的最佳方法
文章推荐： html - 隐藏没有其余内容的 DIV 背景图像
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com