Question

我使用以下代码将不同的类应用于#nav，具体取决于用户是向上，向下滚动还是在页面顶部。

.nav-down
.nav-up
.nav-down-top

码

jQuery(document).ready(function($){
  var didScroll;
  var lastScrollTop = 0;
  var delta = 5;
  var navbarHeight = $('nav').outerHeight(true);

$(window).scroll(function(event) { didScroll = true; });

setInterval(function() {
  if (didScroll) {
    hasScrolled();
    didScroll = false;
  }
}, 100);

function hasScrolled() {
  if($( window ).width() > 768) {
    var st = $(this).scrollTop();
    if (Math.abs(lastScrollTop - st) <= delta)
       return;
    if (st > lastScrollTop) {
    // Scroll Down
    $('#s-nav').removeClass('nav-down').removeClass('nav-down-top').addClass('nav-up');
    } else {
    // Scroll Up (@ top of screen)
    if (st === 0) {
        $('#s-nav').removeClass('nav-up').removeClass('nav-down').addClass('nav-down-top');
   } else { //if (st + $(window).height() < $(document).height()) {
        $('#s-nav').removeClass('nav-up').removeClass('nav-down-top').addClass('nav-down');
    }
}
}
  lastScrollTop = st;
}

});

问题在于，当用户位于页面顶部或滚动到顶部时.nav-down-top并不总是被应用。当用户不能滚动很远到达顶部时，通常会发生这种情况。我不确定如何确保当用户位于页面顶部时应用.nav-down-top。

Answer 1

$(function(){
 var shrinkHeader = 300;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= shrinkHeader ) {
           $('.navbar-fixed').addClass('class');
        }
        else {
            $('.navbar-fixed').removeClass('oneclass');
            $('.navbar-fixed').addClass('otherclass');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});

尝试使用此脚本清理器并告诉我它是否有效

Answer 2

你似乎想要的是：

void showData(int index)
    {

        Connection con = new OrderManager.Connection();
        SqlDataAdapter sda = new SqlDataAdapter("Select * from [MasterDatabase].[dbo].[Neworder] Where OrderID = '" + TxtBox_OrderID.Text + "'", con.ActiveCon());

        dt = new DataTable();
        sda.Fill(dt);

        TxtBox_OrderID.Text = dt.Rows[index][0].ToString();
        ClearTextBoxes();
        dataGridView1.Rows.Clear();
        foreach (DataRow item in dt.Rows)
        {
            int n = dataGridView1.Rows.Add();

            dataGridView1.Rows[n].Cells[0].Value = item["OrderID"].ToString();
            dataGridView1.Rows[n].Cells[1].Value = item["Date"].ToString();
            dataGridView1.Rows[n].Cells[2].Value = item["Customer_Name"].ToString();
            dataGridView1.Rows[n].Cells[3].Value = item["ProductID"].ToString();
            dataGridView1.Rows[n].Cells[4].Value = item["Product_Name"].ToString();
            dataGridView1.Rows[n].Cells[5].Value = item["Product_Color"].ToString();
            dataGridView1.Rows[n].Cells[6].Value = item["Product_PCs"].ToString();
            dataGridView1.Rows[n].Cells[7].Value = item["Product_Cutting"].ToString();
            dataGridView1.Rows[n].Cells[8].Value = item["Product_TotalYards"].ToString();
        }
        label12.Text = "Row Count: " + dt.Rows.Count.ToString();

    }

https://jsfiddle.net/m0nz41ep/1/

您无需设置窗口间隔来检查信息，因为滚动已经是一个在您输入信息时检查窗口的事件。：）

另外，你在做动画吗？

您需要告诉CSS文件您要操作的div将被设置为动画。

var el = $('#test1')
$(window).scroll(function(){
  if($(window).scrollTop() > 50){
    console.log("addClass")
    $(el).addClass('slideUp');
  } else {    
    console.log("removeClass")
    $(el).removeClass('slideUp');
  }
})

如果它只是一个div将它添加到div的id，如果它是多个，将它添加到一个类并将该类添加到所有div。其余的代码应该是神奇的！

当用户位于页面顶部时，并不总是应用类

2 个答案: