如何使用flexbox制作的圣杯布局的侧边栏变粘？即.当最后一个元素到达时,html的旁边和导航部分应该停止向下滚动.我试过多种方法但收效甚微.
HTML:
<body>
<header>header</header>
<div id='main'>
<article>This area has lot of content </article>`
<nav> This nav should not scroll</nav>
<aside>This aside too</div></aside>
</div>
<footer>footer</footer>
</body>
CSS:
body {
/*font: 24px Helvetica;*/
background: #999999;
}
#main {
min-height: 800px;
margin: 0px;
padding: 0px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
}
#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
border-radius: 7pt;
background: #dddd88;
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
} …滚动标题应按照jQuery中的指示滑动/向上滑动,但是,在移动iOS中,这不会发生并且标题在屏幕顶部抖动？
这适用于大型浏览器上的Chrome,Mozilla Firefox,Internet Explorer和Safari.
这是因为滚动顶部方法的错误使用而发生的吗？我该如何纠正？
jQuery(document).ready(function ($) {
var lastScrollTop = 0;
$(window).scrollTop(0);
$(window).on('scroll', function() {
var header = $('header');
var content = $('content');
var headerBg = $('.header-bg');
var headerCnt = $('.header-content');
var scrollTop = $(window).scrollTop();
var dynHeaderVisible = false;
if (lastScrollTop > scrollTop) {
if (scrollTop <= 400) {
headerBg.css("height", 0);
headerCnt.css('color', 'white');
} else {
headerBg.css("height", 80);
headerCnt.css("height", 80);
headerCnt.css('color', 'black');
}
} else {
// Down
if (scrollTop > 350) {
console.log ("hi");
headerCnt.css("height", 0);
headerBg.css("height", 0); …首先,我是新来的,如果这些问题写得不好,请原谅我.
有没有办法在不应用原始引用的CSS/JS的情况下包含单独的html文件？
例如,我有一个文件"index.php",其中有几个对外部样式表的引用.
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
然后我包含另一个文件navbar.html及其自己的外部样式表引用.
<link href="navbar.css" rel="stylesheet">
但是,原始文件的CSS和JS似乎总是适用于包含的文件,不幸的是,这经常会导致包含的页面被不适当地设置样式.
有没有办法在仅应用其所需的CSS和JS时包含页面？
我发现IFrame很有用,我正在寻找一种不使用它们的解决方案,因为它们并不总是与浏览器兼容,并且不会动态改变形状.例如,如果导航栏具有下拉链接,则不会显示,因为iframe具有设置的大小.
我试图让div看起来像是从它的位置增长.为此,我将位置从相对位置更改为固定位置,这使得第一次转换从而top:0, left:0不是元素的当前顶部/左侧开始.如何修复此问题以使用元素当前偏移量？
注意:第一次单击后,代码完全符合我的要求.第一次点击就是问题所在.
我有三个按钮可以将图像添加到我网站上的 div。现在我想要添加的图像，以便我可以将它拖到我的 div 中。我不必是一个 div，它可以是一个画布，我只希望将图像添加为可拖动的。
片段：
function addimage() {
var img = document.createElement("img");
img.src = "http://bricksplayground.webs.com/brick.PNG";
img.height = 50;
img.width = 100;
//optionally set a css class on the image
var class_name = "foo";
img.setAttribute("class", class_name);
document.getElementById("myDiagramDiv").appendChild(img);
//document.body.appendChild(img);
}<div class="col-sm-7 text">
<h1><strong>Div for the images</strong></h1>
<div class="description">
<div id="myDiagramDiv" draggable="true" style="width:600px; height:400px; background-color: #DAE4E4;"></div>
</div>
</div>
<div class="col-sm-5 text">
<div class="description">
<h1><strong>Text</strong></h1>
</div>
<button type="button" class="btn-primary" onclick="addimage();">Dodaj sto za 2 osobe</button>
<button type="button" class="btn-primary" onclick="addimage();">Dodaj sto za 4 osobe</button> …css ×4
html ×3
javascript ×3
css3 ×2
jquery ×2
css-position ×1
flexbox ×1
include ×1
jquery-ui ×1