当用户滚动到页面底部时如何更改css

Question

我目前有一个在滚动后看起来固定的div。我想让div保持可见但是一旦用户到达页面底部就不能修复..

这是我到目前为止所做的：

＆＃13;

＆＃13;

SELECT result.recipe_id, COUNT(*) FROM ( 
    SELECT
        recipe_id, ingredient
    FROM
        ingredients
    WHERE
        (ingredient LIKE '%sugar%')
        OR (ingredient LIKE '%milk%')
        OR (ingredient LIKE '%egg%')
    GROUP BY
        CASE
            WHEN ingredient LIKE '%sugar%' THEN 'sugar'
            WHEN ingredient LIKE '%milk%' THEN 'milk'
            WHEN ingredient LIKE '%egg%' THEN 'egg'
            ELSE NULL
        END
    ) AS result
GROUP BY result.recipe_id;

＆＃13;

var topOfOthDiv = 800; //set manually for example
$(window).scroll(function() {
  if ($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
    $("#ctawrapper.ctaFloat").addClass('show'); //reached the desired point -- show div
  } else {
    $("#ctawrapper.ctaFloat").removeClass('show'); //reached the desired point -- hide div
  }
});

＆＃13;

#ctawrapper.ctaFloat {
  position: fixed;
  bottom: 0;
  height: auto;
  max-height: 100px;
  width: 90%;
  display: none;
}

#ctawrapper.show {
  background: #fff;
  width: 100%;
  z-index: 999;
  left: 0px;
  padding: 15px;
  border: 1px solid #ddd;
  display: block!important;
}

＆＃13;

＆＃13;

＆＃13;

我试图添加新类或在到达页脚后更改css的所有操作都失败了。我能得到一些帮助吗？