我正在尝试fixed标题部分。我能够做到这一点,但是在is-sticky使用 JS添加新类时它会颤抖。top:0;向下滚动时从动画开始。出于这个原因,当摇晃并从顶部开始时,它看起来很奇怪。我希望它可以顺利固定在顶部,不会影响访客的眼睛。就像这个网站http://www.lazada.com.my/
这是我的演示。
$(window).load(function(){
$(window).scroll(function(){
if($(window).scrollTop()>0){
if( ! ($('#scroller').hasClass('is-sticky'))) {
$('#scroller')
.addClass('is-sticky')
.css('top',9)
.animate({
'top': 84
},'1000');
}
} else {
if($('#scroller').hasClass('is-sticky')) {
$('#scroller')
.removeClass('is-sticky')
.css('top',9)
.animate({
'top':84
},1000);
}
}
});
});Run Code Online (Sandbox Code Playgroud)
body{
height:1000px;
margin:0;
padding:0;
position:relative;
}
#scroller {
position: absolute;
left: 0;
top: 84px;
width: 100%;
z-index: 30;
background:#CCC;
height:20px;
}
#scroller.is-sticky {
position: fixed;
width: 100%;
left: 0;
top: 9px;
margin-top: -31px;
height: 53px;
z-index: 701;
background: …Run Code Online (Sandbox Code Playgroud)我是SASS和编程语言的新手。
.row
{
@include make-row;
}
Run Code Online (Sandbox Code Playgroud)
在上面@include,等于@import在sass中起作用吗?您能否解释的功能@include。
我使用 jQuery lightSlider 作为图像滑块。我想在引导药丸内放置滑块(每个药丸一个滑块)。尽管如此,我发现了以下情况: 在第一个药丸中,滑块正常。在第二个药丸中,不显示滑块内容(调整窗口大小会显示滑块内容!)。我不知道如何解决这个问题。任何帮助将不胜感激。
我的(简化的)html:
<div>
<ul class="nav nav-pills">
<li class="active"> <a data-toggle="pill" id="pill1" href="#s1">Pill 1</a>
</li>
<li> <a data-toggle="pill" id="pill2" href="#s2">Pill 2</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="col-md-12 tab-pane fade in active" id="s1">
<ul id="slider-1">
<li>
<p>one</p>
</li>
<li>
<p>two</p>
</li>
<li>
<p>tree</p>
</li>
</ul>
</div>
<div class="col-md-12 tab-pane fade active" id="s2">
<ul id="slider-2">
<li>
<p>uno</p>
</li>
<li>
<p>dos</p>
</li>
<li>
<p>tres</p>
</li>
</ul>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
JavaScript:
function initSlider(sliderId) {
$('#'+sliderId).lightSlider({
item:2,
loop:false,
slideMove:1
});
}
initSlider('slider-1'); …Run Code Online (Sandbox Code Playgroud) 我正在尝试创建一个CSS按钮悬停效果.但我没有设法用倾斜的形状填充元素.
如何计划悬停效果:
屏幕截图1:它实际上看起来如何.
屏幕截图2:我希望悬停效果看起来像倾斜的一面.
.button_sliding_bg {
color: #31302B;
background: #FFF;
padding: 12px 17px;
margin: 25px;
font-family: 'OpenSansBold', sans-serif;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
box-shadow: inset 0 0 0 0 #31302B;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}
.button_sliding_bg:hover {
box-shadow: inset 200px 0 0 0 #31302B;
color: #FFF;
}Run Code Online (Sandbox Code Playgroud)
<button class="button_sliding_bg">Buttontext</button>Run Code Online (Sandbox Code Playgroud)
我有3个部门投入inline的bottom.我不知道怎么做...任何人都可以帮助我?
我试过的代码:
.feature-description
{
margin-top: 20px;
padding-left:10%;
padding-right:10%;
}
.start-up-phase
{
background-color: #a82327;
color: #fff;
padding: 13px 22px 100px;
text-align: justify;
width:86%;
margin-left:auto;
margin-right:auto;
min-height:350px;
}
.growth-phase
{
background-color: #196b8c;
color: #fff;
padding: 13px 22px 110px;
text-align: justify;
width:86%;
margin-left:auto;
margin-right:auto;
min-height:450px;
}
.expansion-phase
{
background-color: #53752f;
color: #fff;
padding: 13px 22px 200px;
text-align: justify;
width:86%;
margin-left:auto;
margin-right:auto;
}
.phase-title
{
border-bottom: 1px solid #fff;
padding-bottom:10px;
}
.phase-content
{
padding-top:5px;
}Run Code Online (Sandbox Code Playgroud)
<!-- Latest compiled and …Run Code Online (Sandbox Code Playgroud)我正在处理一个自定义选项卡,它具有动画底部边框,可以从一个选项卡滑到另一个选项卡
示例:http : //codepen.io/anon/pen/NxNZLv
<div class="tab-nav-wrapper">
<ul>
<li class="one"><a href="#">ONE</a></li><!--
--><li class="two"><a href="#">TWO</a></li><!--
--><li class="three"><a href="#">THREE</a></li><!--
--><li class="four"><a href="#">FOUR</a></li>
<hr />
</ul>
</div>
<div class="tab-content-wrapper">
<div class="tab1-c"><p>This is ONE</p></div>
<div class="tab2-c"><p>This is TWO</p></div>
<div class="tab3-c"><p>This is THREE</p></div>
<div class="tab4-c"><p>This is FOUR</p></div>
<div>
Run Code Online (Sandbox Code Playgroud)
我希望根据单击的选项卡显示相关项目。我试图让它工作,但出现错误。
事件试图将其转换为无法正常工作的引导程序选项卡。它打破了我在标签上想要的动画
基于 Boostrap 的示例:http ://codepen.io/anon/pen/KVzjJo
我已经更新了小提琴并为每个选项卡编写了脚本。而不是我想要单个脚本来管理它。
http://codepen.io/anon/pen/NxNZLv
我们可以改进吗?
我正在使用larval 4.2,我在wrapper.php我的视图文件中收到以下错误:
<?php echo View::make('layouts/blocks/header')->with('sidebar', $sidebar)->with('active', $active); ?>
<?php echo $content; ?>
<?php echo View::make('layouts/blocks/footer'); ?>
Run Code Online (Sandbox Code Playgroud)
错误:
Error : Method Illuminate\View\View::__toString() must not throw an exception
Run Code Online (Sandbox Code Playgroud)
你知道什么导致了这个吗?
我想在 VerticalLayout 周围画一个边框(轮廓)。我不希望我的所有 VerticalLayout 组件都有边框,只有其中一个。这是 Eclipse 中的 Vaadin 7 项目。
我有数组的以下对象,并试图获取电子邮件的价值.如何才能做到这一点?
stdClass Object (
[status] => stdClass Object (
[info] => Unsubscribe List [code] => 200
)
[data] => Array (
[o1958147@rtrtr.com] => stdClass Object (
[date] => 2013-01-28 08:09:19
[origin] =>
)
[phil.houston@granherne.com] => stdClass Object (
[date] => 2013-01-28 08:35:59
[origin] =>
)
)
)
Run Code Online (Sandbox Code Playgroud)
目前我可以使用以下foreach访问日期值.
foreach ($fnret->data as $msg)
{
echo $msg->date; // shows 2013-01-28 08:35:59
}
Run Code Online (Sandbox Code Playgroud) 似乎CSS transition: translate()与之冲突,z-index我无法为自己的积木创建折叠效果。
<div class="card">
<div class="arrow-box">
<span>Destinations</span>
</div>
<div class="choice" style="z-index: 1">
<div class="choice-header">New York</div>
<div class="choice-content" style="background: red"></div>
</div>
<div class="choice" style="z-index: 2">
<div class="choice-header">Boston</div>
<div class="choice-content" style="background: #801566"></div>
</div>
<div class="choice" style="z-index: 3">
<div class="choice-header">Seattle</div>
<div class="choice-content" style="background: green"></div>
</div>
<div class="choice" style="z-index: 4">
<div class="choice-header">Washington</div>
<div class="choice-content" style="background: #1e3180"></div>
</div>
<div class="choice" style="z-index: 5">
<div class="choice-header">San Francisco</div>
<div class="choice-content" style="background: #e5f400"></div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
.choice {
transition: .6s;
margin-bottom: -264px;
z-index: 0; …Run Code Online (Sandbox Code Playgroud)