我在CSS中设置了font-size: 128px。如何在滚动时将其缩小为80px？我遇到的问题是font-size一直减少到0并消失。
// Static variables - That do not change while scrolling
var header = $("header"),
headerHeight = header.height(), // Get height of header
logo = $(".logo"), // Get the logo
logoHeight = logo.height(), // Get logo height
fs = logo.css("font-size"),
scrollTo = 120, // Animation until scrolled to this point
win = $(window);
$("#main").css("margin-top", win.height());
console.log(fs);
// Scroll function
$(window).on("scroll", function() {
// Dynamic variables - That do change while scrolling
var yPos = $(this).scrollTop(), // Get the scroll Y-position
yPer = yPos / scrollTo; // Calculate percenage of scroll
// If percentage is over 100, set to 100
if (yPer > 1) {
yPer = 1;
}
// Dynamic variables for the elements
var logoPos = -1 * (yPer * 50) + 50, // Calculate position of logo (starting from 50%)
logoSize = headerHeight * yPer - logoHeight * yPer + logoHeight, // Calculate new size height for logo
headerPos = yPer * headerHeight - headerHeight, // Calculate position of header (starting from minus the height of itself)
fonts = fs / yPos;
// Change the top, left, transform and height of the logo
logo.css({
top: logoPos + 5 + "%",
transform: "translate3d(-50%,-" + logoPos + "%,0)",
fontSize: logoSize,
height: logoSize
// left: logoPos + "%",
// transform: "translate3d(-" + logoPos + "%,-" + logoPos + "%,0)",
});
// Change the transform and opacity of the header
$("header").css({
//transform: "translate3d(0," + headerPos + "px,0)",
top: headerPos,
opacity: yPer
});
});