小编Dan*_*Dan的帖子

我试图让我的粘性标题具有过渡效果,因此它可以减轻而不仅仅是快速移动.

我究竟做错了什么？

这是我的工作版本:

http://codepen.io/juanmata/pen/RVMbmr

基本上下面的代码将类添加到我的包装类中,这很好用.

$(window).on('load', function() {
    $(window).on("scroll touchmove", function () {
        $('.wrapper').toggleClass('tiny', $(document).scrollTop() > 0);
    });
});

这是CSS部分:

.wrapper {
    grid-template-rows: 80px calc(75vh - 80px) 25vh 80px;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.tiny {
    grid-template-rows: 40px calc(75vh - 40px) 25vh 80px;
}

所以标题确实缩小了它应该但没有动画,我错过了什么或转换根本不适用于网格？

这是css-grid文档的链接.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

$(window).on('load', function() {
  $(window).on("scroll touchmove", function() {
    $('.wrapper').toggleClass('tiny', $(document).scrollTop() > 0);
  });
});

* {
	margin:0;
	padding:0;
}

.wrapper {
	display: grid;
	grid-gap: 0px;
	grid-template-columns: …

我正在创建一个1页的网站,我想在用户向下滚动时删除一个类,并在用户向上滚动时添加该类.

我已经做到了这一点,但是它不正确,当用户从顶部向下滚动50px然后该类被移除并且当用户从顶部向上滚动50px时添加它.

我想要它,以便它们几乎可以在页面的底部,如果向上滚动类,如果它们向下滚动,那么它被删除

这是我到目前为止的查询

jQuery(document).ready(function($) {
    $(".test").addClass("mobile");
    $(window).scroll(function(){
        var scroll = $(window).scrollTop();
        if (scroll >= 50) {
        $(".test").removeClass("mobile");
        } else if (scroll <= 50) {
        $(".test").addClass("mobile");
        }
    });
});

我正在使用 swiper.js ( http://idangero.us/swiper/api/#.WCBYcxKLTfA )

请在附件中找到我当前代码的工作代码：https : //jsfiddle.net/0L2h1p25/12/

我现在正试图按照我想要的方式设计它，但我需要解决两个问题。

第 1 部分：分页点不可点击 第 2 部分：导航不起作用

第 1 部分：我已经更改了 swiper.js 中的分页以获得我想要的样式，现在它阻止了用户点击点进入幻灯片。

你应该使用：

paginationClickable: true,

允许点击，但在您使用时不起作用；

paginationType: "custom",

我需要帮助使以下代码可点击，以便当有人点击该点时，它会转到幻灯片。

这是 swiper 执行：

// Swiper Execution
var swiper = new Swiper('.hero-container', {
    direction: 'horizontal',
    pagination: '.cd-slider',
    nextButton: '.swiper-next',
    prevButton: '.swiper-prev',
    slidesPerView: 1,
    paginationClickable: true,
    spaceBetween: 0,
    loop: true,
    speed: 400,
    effect: 'slide',
    keyboardControl: true,
    hashnav: true,
    useCSS3Transforms: false,
    paginationType: "custom",
    paginationCustomRender: function(swiper, current, total) {
        var names = [];
        $(".swiper-wrapper .swiper-slide").each(function(i) { …

我正在尝试实现CSS网格模式，其中标题覆盖下一行。

我在顶部添加了代码片段，附件中的图像应显示您正在尝试实现的目标。

谢谢

body { 
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav article ads"
    "footer footer footer";
  grid-template-rows: 80px 1fr 70px;  
  grid-template-columns: 20% 1fr 15%;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  height: 100vh;
  margin: 0;
  }  
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
  body { 
    grid-template-areas: 
      "header"
      "article"
      "ads"
      "nav"
      "footer";
    grid-template-rows: 80px 1fr 70px 1fr 70px;  
    grid-template-columns: 1fr;
 }
}
header, footer, article, nav, div {
  padding: 1.2em;
  background: gold;
  }
#pageHeader {
  grid-area: …

我有一个似乎工作正常的幻灯片菜单,问题是如果你选择一个它应该做的链接,如果你选择一个有孩子的链接,那么preventdefault()就会启动并滚动到它孩子,我很高兴到目前为止,但是一旦你到了链接的末尾,因为没有更多的孩子,链接应该正常工作,但事实并非如此.

这是jquery

$(".menu li").click(function(e) {
    if($(this).children('.sub-menu').length > 0) {
        e.preventDefault();
        $(this).children('.sub-menu').addClass('open');
    }
    else  {
        $(".menu li").ready(function(){
            return true;
        });
    }
});

我还附上了一个工作的小提琴.

http://jsfiddle.net/R6wHG/16/