تصویر ثابت
سوال
با سلام!
من دوست دارم در سایتم یک تصویری وجود داشته باشه که با اسکرول حرکت نکنه اما دوست دارم به جای عکس یک بک گراند باشه و از تگ لینک هم استفاده نشه و در همون صفحه سایت باشه
این هم کدی است که من پیدا کردم
document.write("<div id='fixeddiv' style='position:absolute;z-index:500;left:1px;top:1px;'><a target='_blank' href='1'><img src='؟' border=0></a></div>");fixedMenuId = 'fixeddiv';var fixedMenu = {hasInner: typeof(window.innerWidth) == 'number',hasElement: document.documentElement != null && document.documentElement.clientWidth,menu: document.getElementById? document.getElementById(fixedMenuId): document.all ? document.all[fixedMenuId] : document.layers[fixedMenuId]};fixedMenu.computeShifts = function(){fixedMenu.shiftX = fixedMenu.hasInner? pageXOffset: fixedMenu.hasElement ? document.documentElement.scrollLeft : document.body.scrollLeft;if (fixedMenu.targetLeft > 0)fixedMenu.shiftX += fixedMenu.targetLeft;else{fixedMenu.shiftX += (fixedMenu.hasElement ? document.documentElement.clientWidth : fixedMenu.hasInner? window.innerWidth - 20: document.body.clientWidth)- fixedMenu.targetRight- fixedMenu.menu.offsetWidth;}fixedMenu.shiftY = fixedMenu.hasInner? pageYOffset: fixedMenu.hasElement ? document.documentElement.scrollTop : document.body.scrollTop;if (fixedMenu.targetTop > 0)fixedMenu.shiftY += fixedMenu.targetTop;else{fixedMenu.shiftY += (fixedMenu.hasElement? document.documentElement.clientHeight: fixedMenu.hasInner ? window.innerHeight - 20 : document.body.clientHeight)- fixedMenu.targetBottom- fixedMenu.menu.offsetHeight;}};fixedMenu.moveMenu = function(){fixedMenu.computeShifts();if (fixedMenu.currentX != fixedMenu.shiftX|| fixedMenu.currentY != fixedMenu.shiftY){fixedMenu.currentX = fixedMenu.shiftX;fixedMenu.currentY = fixedMenu.shiftY;if (document.layers){fixedMenu.menu.left = fixedMenu.currentX;fixedMenu.menu.top = fixedMenu.currentY;}else{fixedMenu.menu.style.left = fixedMenu.currentX + 'px';fixedMenu.menu.style.top = fixedMenu.currentY + 'px';}}fixedMenu.menu.style.right = '';fixedMenu.menu.style.bottom = '';};fixedMenu.floatMenu = function(){fixedMenu.moveMenu();setTimeout('fixedMenu.floatMenu()', 20);};fixedMenu.addEvent = function(element, listener, handler){if(typeof element[listener] != 'function' ||typeof element[listener + '_num'] == 'undefined'){element[listener + '_num'] = 0;if (typeof element[listener] == 'function'){element[listener + 0] = element[listener];element[listener + '_num']++;}element[listener] = function(e){var r = true;e = (e) ? e : window.event;for(var i = 0; i < element[listener + '_num']; i++)if(element[listener + i](e) === false)r = false;return r;}} for(var i = 0; i < element[listener + '_num']; i++)if(element[listener + i] == handler)return;element[listener + element[listener + '_num']] = handler;element[listener + '_num']++;};fixedMenu.supportsFixed = function(){var testDiv = document.createElement('div');testDiv.id = 'testingPositionFixed';testDiv.style.position = 'fixed';testDiv.style.top = '0px';testDiv.style.right = '0px';document.body.appendChild(testDiv);var offset = 1;if (typeof testDiv.offsetTop == 'number'&& testDiv.offsetTop != null && testDiv.offsetTop != 'undefined'){offset = parseInt(testDiv.offsetTop);}if (offset == 0){return true;}return false;};fixedMenu.init = function(){if (fixedMenu.supportsFixed())fixedMenu.menu.style.position = 'fixed';else{var ob = document.layers ? fixedMenu.menu : fixedMenu.menu.style;fixedMenu.targetLeft = parseInt(ob.left);fixedMenu.targetTop = parseInt(ob.top);fixedMenu.targetRight = parseInt(ob.right);fixedMenu.targetBottom = parseInt(ob.bottom);if (document.layers){menu.left = 0;menu.top = 0;}fixedMenu.addEvent(window, 'onscroll', fixedMenu.moveMenu);fixedMenu.floatMenu();}};fixedMenu.addEvent(window, 'onload', fixedMenu.init);
در حال بررسی
0
HTML, طراحی سایت 6 سال
2020-08-03T10:13:45+03:30
2020-08-03T10:13:45+03:30 1 پاسخ ها
کاربر تازه 0
پاسخ ( 1 )
سلام
یک نمونه کد براتون میزارم که تصویر ثابت هست:
<html> <head> <title> www.beporsam.ir </title> </head> <style type="text/css"> /* -------------------------------- Primary style -------------------------------- */ html * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-size: 100%; font-family: "Roboto", sans-serif; color: #3d3536; background-color: white; } body, html { /* important */ height: 100%; } a { color: #a6989a; } /* -------------------------------- Modules - reusable parts of our design -------------------------------- */ .cd-container { /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */ width: 90%; max-width: 768px; margin: 0 auto; } .cd-container::after { /* clearfix */ content: ''; display: table; clear: both; } .cd-main-content { /* you need to assign a min-height to the main content so that the children can inherit it*/ height: 100%; position: relative; z-index: 1; } .cd-fixed-bg { position: relative; min-height: 75%; background-size: cover; background-repeat: no-repeat; background-position: center center; z-index: 1; } .cd-fixed-bg h1, .cd-fixed-bg h2 { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 90%; max-width: 1170px; text-align: center; font-size: 30px; font-size: 1.875rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); color: white; } .cd-fixed-bg.cd-bg-1 { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/181085/track_riders_bg01.jpg"); } .cd-fixed-bg.cd-bg-2 { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/181085/track_riders_bg02.jpg"); } .cd-fixed-bg.cd-bg-3 { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/181085/track_riders_bg03.jpg"); } .cd-fixed-bg.cd-bg-4 { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/181085/track_riders_bg04.jpg"); } @media only screen and (min-width: 320px) { .cd-fixed-bg h1, .cd-fixed-bg h2 { font-size: 36px; } } @media only screen and (min-width: 480px) { .cd-fixed-bg { background-attachment: fixed; } .cd-fixed-bg h1, .cd-fixed-bg h2 { font-size: 48px; font-weight: 300; } } .cd-scrolling-bg { position: relative; min-height: 50%; padding: 4em 0; line-height: 1.6; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); z-index: 2; } .cd-scrolling-bg.cd-color-1 { background-color: #3d3536; color: #a6989a; } .cd-scrolling-bg.cd-color-2 { background-color: #3d3536; color: #a6989a; } .cd-scrolling-bg.cd-color-3 { background-color: #3d3536; color: #a6989a; } @media only screen and (min-width: 480px) { .cd-scrolling-bg { padding: 8em 0; font-size: 20px; font-size: 1.25rem; line-height: 2; font-weight: 300; } } </style> <body> <main class="cd-main-content"> <div class="cd-fixed-bg cd-bg-1"> <h1>Alternating fixed/scrolling backgrounds Pure CSS</h1> </div> <!-- cd-fixed-bg --> <div class="cd-scrolling-bg cd-color-2"> <div class="cd-container"> <p> For this pen I included only the vanilla CSS and only that necessary to demonstrate the effect but on the author's site at <a href="codyhouse.co/gem/alternate-fixed-scroll-backgrounds/">codyhouse.co</a>, the creators are using Sass which I think is nicer. But for the sake of simplicity for this example I took the easy way out. </p> <p> As anyone who has tried knows, implementing sample code such as this into a site with a different architecture can be a little tricky but I did manage to weave it into a pre-existing project with a little work. I love the effect! </p> </div> <!-- cd-container --> </div> <!-- cd-scrolling-bg --> <div class="cd-fixed-bg cd-bg-2"> <h2>www.beporsam.ir</h2> </div> <!-- cd-fixed-bg --> <div class="cd-scrolling-bg cd-color-3"> <div class="cd-container"> <p>In the authors presentation of the code, the default setting for the height of both the fixed and scrolling backgrounds is 100%. That min height can be what ever you want. If you add more text, the container grows but will always fill the viewport to the degree that min-height is defined.</p> <p>I have chosen to reduce this value to something less than 100% because at 100%, upon initial page load, the user has no visual indication that there is anything below the fold. My settings for these values, contained in the classes .cd-fixed-bg and .cd-scrolling-bg are 75% and 50% respectively.</p> <p>I suppose you could ad ID's to the individual scrolling-bg's and have them at different sizes for different purposes but that's up to you. </p> </div> <!-- cd-container --> </div> <!-- cd-scrolling-bg --> <div class="cd-fixed-bg cd-bg-3"> <h2>There I go again, leaning it over.</h2> </div> <!-- cd-fixed-bg --> <div class="cd-scrolling-bg cd-color-1"> <div class="cd-container"> <p> Originally I tried implementing just the code snippets they show on the site but that totally did not work. Finally I downloaded the source and realized that there was so much more to it than just the bit they showed on the blog page. So we continue to learn. </p> </div> <!-- cd-container --> </div> <!-- cd-scrolling-bg --> <div class="cd-fixed-bg cd-bg-4"> <h2>Last shot is a knee dragger!</h2> </div> <!-- cd-fixed-bg --> </main> <!-- cd-main-content --> </body> </html>و در کل برای ثابت نگه داشتن بک گراند از ویژگی CSS زیر استفاده میشود:
body { background-image: url("beporsam.png"); background-repeat: no-repeat; background-attachment: fixed; }موفق باشید.