Are we able to Fix Position HTML Text on Top and make it Run from Right to Left

Minh Nguyen
Minh Nguyen used Ask the Experts™
on
Hello,
Appreciate your help.

I have a question about websites which are in mobile version. My experience in this aspect is quite less.
Please confirm whether we can fix the position of the HTML text line on the top of the web page, and still keep that line running from the right to the left side (using <marquee> tag) at the same time.
Please let me know if we have another way (some JS for example) to do this task without using the <marquee> tag.

Thanks in advanced.

I am available from 08:30 to 22:00, GMT +7.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Minh NguyenIT Support

Author

Commented:
Hi Nam,
Thank you for the information!

However, I still want to know whether we can apply the sliding text effect ( http://jsfiddle.net/lenamtl/gr4fLt5d/ ) as well as fixing the position of that text, so it can always be on top of the web page, no matter how much we scroll the page down.

For example, the below screenshot shows the fixed position of the text "Some text here" which I want:
"Some text here" is on top and scrolling from right to left
Nevertheless, "Some text here" will be disappear when I scroll the page down to see remaining content of the web page:
"Some text here" disappears when the page is scrolled down
Is there any way to make "Some text here" still be on top, and also still slide from right to left?
Please note that the web page will be displayed on Mobile.
Hi,
you can use Bootstrap to have mobile / tablet /desktop view and place your code into a div.

there are several way to do it
you can use
float : https://getbootstrap.com/docs/4.0/utilities/float/
Position: https://getbootstrap.com/docs/4.0/utilities/position/
Z-index can be use so your div won't hide another div : https://getbootstrap.com/docs/4.0/layout/overview/#z-index
Display : https://getbootstrap.com/docs/4.0/utilities/display/

You have some example with sticky items
https://getbootstrap.com/docs/4.0/examples/

To save a lot of time I would recommend to use a template ready to use, most of them have menu with top menu (so you can place your marque on top of your menu. Most of them have sticky item, sticky menu and footer

All these required some calculation and these template have all this ready for you at very low price
You can ask author if your are not sure before to buy
https://themeforest.net/tags/bootstrap
Minh NguyenIT Support

Author

Commented:
Thank you Nam,
Actually, I am not the one who directly develop the website. My role is pointing out what should be done to the website by the web development team. They are using ASP.NET, and I don't think Bootstrap is being used.
Thus, the website looks cheap and ugly.

Appreciate if you can show exactly how to do my requirements without using Bootstrap. That is the reason why I come here.
If you are not able, please don't worry cause I think I will figure it out. Although it may take time.
Thank you once again for your help till now!
Have a nice day!
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
Just play with position sticky or fixed.  

https://jsfiddle.net/
<style>
.top{
  position:fixed;
  z-index:1000;
  top:0;
  background-color:red;
  height:30px;
  width:100%;
  color:white;
}
</style>
<div class="top">
This is the top
</div>
<div class="stuff">
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ante lectus, iaculis ac lobortis feugiat, ornare accumsan tortor. Quisque euismod in risus eu sodales. Phasellus nec nunc id turpis mollis consequat sed nec orci. Praesent cursus tincidunt risus, molestie ornare nisl placerat sed. Pellentesque maximus urna at cursus rhoncus. Vivamus feugiat ultricies leo at cursus. Aenean laoreet risus eget posuere ultrices. Sed et cursus felis, vel sagittis quam. Aliquam erat volutpat. In vehicula arcu sit amet quam finibus, ac mollis tellus interdum.
</p>
<p>
Ut dignissim tempus arcu vel accumsan. Nunc maximus arcu orci, eget suscipit velit imperdiet id. Morbi vitae libero a purus maximus mattis nec non massa. Nunc eu urna quis nibh tincidunt euismod. Cras eget turpis non nunc pharetra maximus. Vivamus porttitor sed orci sollicitudin tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Curabitur nisl nulla, dictum quis nunc at, commodo dignissim arcu. Donec sed gravida nunc. Ut malesuada volutpat urna, ac sodales mauris vestibulum ac. Nullam mi urna, ullamcorper non lectus a, vulputate rutrum lacus. Cras venenatis purus est, quis consequat lectus fermentum nec. Duis cursus pulvinar turpis, vitae pretium mi dapibus eget. Praesent in vestibulum ante, vel rhoncus quam. Cras eleifend neque ut sapien laoreet, in scelerisque lectus dapibus. Vivamus elementum non odio quis tempor. Donec scelerisque a dui non iaculis. Duis tristique leo id suscipit finibus. Duis aliquet purus vitae tempor viverra. Phasellus feugiat purus vitae nisl aliquam luctus. Ut aliquet tempus sem, sit amet porttitor massa venenatis et. Curabitur venenatis eget arcu sed ornare.
</p>
<p>
Nam sodales velit ut ante eleifend commodo. Sed laoreet, velit in placerat facilisis, nisi diam ornare orci, sit amet hendrerit leo sapien in leo. Nullam aliquet lectus quis magna consectetur rhoncus. Quisque hendrerit maximus sem, at aliquet lorem fermentum id. Praesent mattis, mauris nec mollis accumsan, justo dolor molestie diam, at tincidunt eros justo in enim. Duis congue metus sem, at laoreet elit tempor vitae. Etiam eget ligula a felis egestas lacinia. Duis rutrum, lectus eu viverra sodales, diam enim molestie magna, in mollis nisi est at elit. Nunc aliquam sapien nec dolor fermentum, at varius massa luctus. Mauris commodo nibh non euismod venenatis. Nunc convallis nisi non dictum tincidunt.
</p>
<p>
Nunc magna metus, fermentum vel elit id, porta laoreet mauris. Donec lacus urna, iaculis ut malesuada at, faucibus ut ex. Fusce pellentesque erat ut urna porttitor ultrices. Aliquam consectetur hendrerit ante. Suspendisse ultrices erat vitae cursus aliquam. Sed vel congue orci. Morbi sed nisi neque. Sed finibus mauris sit amet nisl feugiat tempor. Donec pretium scelerisque venenatis. Maecenas sed luctus felis, vel ultrices urna. Praesent viverra libero at nibh aliquet maximus. Nam vitae varius tortor. Suspendisse tempor accumsan ligula tempor pulvinar. Ut sit amet vehicula sapien, id vestibulum metus. Ut vitae erat nec nisl porttitor semper. Suspendisse tristique massa sed faucibus rutrum.
</p></div>
</div>

Open in new window


You can place your sliding text in the 'top' area.
Minh NguyenIT Support

Author

Commented:
Thank you

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial