Question

澄清我想要做的事情：

我有一个固定的背景图像，当用户滚动时，它应该会略微移动，这已经有效了。但是当图像消失时，我希望它再次出现在屏幕的开头。

图像只是一个例子，它将是一个100％宽的svg，因此图像必须在它离开时再次出现在屏幕上：1px已经。

我该怎么做？

这是我的代码

＆＃13;

import java.sql.Date;
import java.util.Calendar;
import myrestorderproject.Tools;

public class Bill {

private int Order_Id;
private double SubTotal = 0;
private int Personal_Count;
private double Min_Charge = 0;
private double Remain_MinChrge = 0;
private double Total_Amount = 0;
private java.util.Date SysDate = Calendar.getInstance().getTime();
private java.sql.Date sqlDate;

public int getOrder_Id() {
    return Order_Id;
}

public void setOrder_Id(int Order_Id) {
    this.Order_Id = Order_Id;
}

public double getSubTotal() {
    return SubTotal;
}

public void setSubTotal(double SubTotal) {
    this.SubTotal = SubTotal;
}

public int getPersonal_Count() {
    return Personal_Count;
}

public void setPersonal_Count(int Personal_Count) {
    this.Personal_Count = Personal_Count;
}

public double getMin_Charge() {
    return Min_Charge;
}

public void setMin_Charge(double Min_Charge) {
    this.Min_Charge = Min_Charge;
}

public double getRemain_MinChrge() {
    return Remain_MinChrge;
}

public void setRemain_MinChrge(double Remain_MinChrge) {
    this.Remain_MinChrge = Remain_MinChrge;
}

public double getTotal_Amount() {
    return Total_Amount;
}

public void setTotal_Amount(double Total_Amount) {
    this.Total_Amount = Total_Amount;
}

public java.util.Date getSysDate() {
    return SysDate;
}

public void setSysDate(java.util.Date SysDate) {
    this.SysDate = SysDate;
}

public java.sql.Date getSqlDate() {
    return sqlDate;
}

public void setSqlDate(java.sql.Date sqlDate) {
    this.sqlDate = sqlDate;
}

public String getAutoNumber() {
    return db.goTodataBase.getAutoNumber("bill", "order_id");
}

public void addDate() {

    try {
        String strInsert = "INSERT INTO bill (Order_Date, SubTotal, Personal_Count, Min_Charge, "
                + "Remain_Min_Charge, Total_Amount)"
                + "     VALUES (NOW(), 0, 0, 0, 0, 0)";
        boolean isAdd = db.goTodataBase.runNonQuery(strInsert);
        if (isAdd) {
            Tools.msgBox("Bill Is Added");
        }
    } catch (Exception e) {
        Tools.msgBox(e.getMessage());
    }

}

}

＆＃13;

    var offset = $("#moving-element").offset();
    $(window).scroll(function(event) {
      var st = $(this).scrollTop();
      $("#moving-element").css("left", st + offset.left);
    });

＆＃13;

    body {
      height: 9999px
    }
    
    #moving-element {
      height: 100px;
      width: 100%;
      background:   url('https://vignette.wikia.nocookie.net/nintendo/images/5/5c/Jumping_Mario_Artwork_-_New_Super_Mario_Bros._Wii.png/revision/latest?cb=20120318204810&path-prefix=en');
     background-repeat: no-repeat;
      background-size: contain;
      background-position: bottom left;
      position: fixed;
      bottom: 0;
    }

＆＃13;

Answer 1

以st％width更新变量st，其中width是div宽度。所以每当它变得超过div宽度时，它会再次自动重置

var offset = $("#moving-element").offset();
var width = $("#moving-element").width();
$(window).scroll(function(event) {
  var st = $(this).scrollTop();
  st = st%width;
  $("#moving-element").css("left", st + offset.left);
});

使元素移动，当它在屏幕的末尾消失时，使其再次出现在屏幕的开头

1 个答案: