查看特定页面时将额外的CSS类应用于标题

如果用户向下滚动页面，可以从CSS人员获得帮助以减少标题的高度。因此，而不是一个小图像和一个相关的标题，只留下标题，留下更多的空间来查看网页。这是通过在用户向下滚动页面时自动将“滚动”类添加到标题来完成的。查看特定页面时将额外的CSS类应用于标题

<header class="push" style="right: 0px; -webkit-transition: right 300ms ease; transition: right 300ms ease;"

成为： class="push scrolled"，它返回到class="push"当用户滚动备份页面，再次添加小图片的标题。

我的问题是针对某个特定页面我需要头文件类永久在class="push scrolled"。我怎样才能做到这一点？

/* change on scroll */ 
header, 
header * { 
    -webkit-transition: all 0.3s ease-in; 
    -moz-transition: all 0.3s ease-in; 
    -o-transition: all 0.3s ease-in; 
    transition: all 0.3s ease-in; 
} 

header.scrolled { 
    padding: 0px 0px 10px 0px; 
} 

header.scrolled #page-header-top .inner-wrap { 
    height: 0; 
    padding-top: 0; 
    padding-bottom: 0; 
} 

header.scrolled a#logo { 
    margin: 12px 0 5px; 
} 

header.scrolled ul#nav li a img { 
    height: 0; 
    margin: 0; 
} 

header.scrolled #mobile-btn { 
    margin: 10px 0 3px; 
}

来源

2015-03-31 John

'$（“header”）。addClass（“scrolled”）'？就是这样，还是我错过了什么？ – 2015-03-31 11:45:03

是啊$（“标题”）。addClass（“滚动”）页面初始加载时工作，但当我再次上下滚动页面时，它显示旧的大头....这意味着它正在删除'滚动'再次？ – John 2015-03-31 11:49:10

这听起来像你的类正在用JS清空，这就是为什么它不持有类。只要确定它何时重新添加类以包含滚动类。

来源

2015-03-31 11:55:29 Dan

您可以使用另一个类“可折叠”，只有在部份头与此类应用更改 $（“可折叠‘）。addClass（’滚动”）不要将该类添加到你赢了”头要改变。

你也可以使用id的insted这个新类。

来源

2015-03-31 12:05:02 kikerrobles

查看特定页面时将额外的CSS类应用于标题

回答

相关问题