Question

我正在创建一个新网站，正如您在下面的代码中看到的，我在背景固定位置图像上方放置了两个类（徽标和文本）。我把它们放在图像的顶部，使用绝对位置，左边50％，前50％和变换：平移（-50％， - 50％）;这很好，没有任何问题，并以我希望的方式响应。

但是，只要我将JS代码（fade_effect）添加到网站，它就会略微移动两个元素（徽标和文本）的位置。有人可以帮助我，编辑了很多次代码并研究它但找不到解决方案。我相信它可能与我读过的JS代码部分.offset（）有关，这看起来像JS代码的一部分会影响这些元素的位置。请参阅以下代码：

HTML：

<link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css" />

<body style="height: 2000px; margin: 0; padding: 0;">

<div class="img_slide">
  <h1 class="logo fade_effect">Logo Here</h1>
    <p class="text fade_effect">Welcome to My Site</p>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CSS：

/** Background image code BELOW **/
.img_slide {
height: 800px;
width: 100%;
background-image: linear-gradient(150deg, rgba(68, 0, 139, 0.7), rgba(47, 0, 120, 0.6) 10%, rgba(27, 57, 129, 0.5) 30%, rgba(41, 123, 192, 0.5) 50%, rgba(114, 240, 255, 0.6) 86%, rgba(84, 183, 249, 0.7)), url("http://www.strawberryproofing.co.uk/images/nature_large1.png");
background-repeat: no-repeat;
background-position: 0%, 0%, 50%, 50%;
background-attachment: scroll, fixed;
background-size: auto, cover;  
}
/** Background image code ABOVE **/


.logo {
font-family: 'Raleway', sans-serif;
font-weight: normal;
font-size: 60px;
color: white;
padding: 25px;
border: 3px solid white;
/* position absolute - center */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

}

.text {

color: white; 
font-family: 'Raleway', sans-serif;
font-weight: normal;
font-size: 25px;
padding: 10px;
/* position absolute - center */
position: absolute;
left: 50%;
top: 70%;
transform: translate(-50%, -50%);

}



/** CSS code called by the JS .addClass **/

.fade_effect {

opacity: 0; 

}

.FadeIn {
-webkit-animation: slideIn 0.8s ease 0.3s forwards;
animation: slideIn 0.8s ease 0.3s forwards;
}

@-webkit-keyframes slideIn {
0%{
    -webkit-transform: translateY(40px);
    opacity: 0;
}
100% {
    -webkit-transform: translateY(0px);
    opacity: 1;
}

}


@keyframes slideIn {
0% {
    -webkit-transform: translateY(40px);
    opacity: 0;
}
100% {
    -webkit-transform: translateY(0px);
    opacity: 1;
}
} 

/** CSS code called by the JS .addClass **/

使用Javascript：

var $fade =  $(".fade_effect"); //Calling the class in HTML

$(window).scroll(function () { //Using the scroll global variable
$fade.each(function () {

    fadeMiddle = $(this).offset().top + (0.4 *$(this).height());
    windowBottom = $(window).scrollTop() + $(window).height();

    if (fadeMiddle < windowBottom) {
      $(this).addClass("FadeIn");
    }
    });
});

/* On Load: Trigger Scroll Once*/
$(window).scroll();

也可以通过我的CodePen页面在线查看：https://codepen.io/billyfarroll/pen/qYWYYV

Answer 1

请参阅以下代码：

CREATE TABLE Users(
    FName VARCHAR(60),
    LName VARCHAR(60),
    Email VARCHAR(60),
    UName VARCHAR(30) NOT NULL,
    PWord VARCHAR(60),
    PRIMARY KEY(UName)
);

CREATE TABLE Items(
    INumber INT NOT NULL,
    IName VARCHAR(80),
    IPrice FLOAT,
    QtyAvailable INT CHECK(QtyAvailable>=0),
    IDescription VARCHAR(200),
    PRIMARY KEY(INumber)
);

CREATE TABLE Cart(
    CartID INT NOT NULL AUTO_INCREMENT,
    Username VARCHAR(30) NOT NULL,
    ItemNumber INT NOT NULL,
    Qty INT,
    PRIMARY KEY(CartID),
    constraint userIDFK
        FOREIGN KEY (Username) REFERENCES Users(UName)
        ON DELETE CASCADE
        ON UPDATE CASCADE,
    CONSTRAINT itemIDFK
        FOREIGN KEY (ItemNumber) REFERENCES Items(INumber)
        ON DELETE CASCADE
        ON UPDATE CASCADE
);

CREATE TABLE Orders(
    ONumber INT NOT NULL AUTO_INCREMENT,
    ODate VARCHAR(20),
    OUName VARCHAR(30) NOT NULL,
    OItemNumber INT NOT NULL,
    Qty INT,
    UnitPrice FLOAT,
    OComplete VARCHAR(3),
    CardName VARCHAR(20),
    CardNumer DOUBLE,
    CSV INT,
    ExpDate VARCHAR(11),
    Email VARCHAR(60),
    PRIMARY KEY(ONumber),
    constraint ouserIDFK
        FOREIGN KEY (OUName) REFERENCES Users(UName)
        ON DELETE CASCADE
        ON UPDATE CASCADE,
    CONSTRAINT oitemIDFK
        FOREIGN KEY (OItemNumber) REFERENCES Items(INumber)
        ON DELETE CASCADE
        ON UPDATE CASCADE
);

Answer 2

如果我正确理解您的问题，只需将徽标和文本元素包装在div中，然后将其放在您想要的位置。

<div class="logoContainer">
  <h1 class="logo fade_effect">Logo Here</h1>
  <p class="text fade_effect">Welcome to My Site</p>
<div>

CSS：

.logoContainer {
  color: white;
  padding: 0 20px;
  border: 3px solid white;
  position: absolute;
  left: 50%;
  top: 50%;
}
.logo {
  font-size: 60px;
  text-align: center;
}
.text {
  font-size: 25px;
 }

JSbin如果你需要它：http://jsbin.com/xerezohabo/edit?output

Javascript改变了html元素的绝对位置

2 个答案: