*** SOLVED *** Menu with scrollspy does not work as expected

[Markus]

Hello BaconFries,

thanks for the hint to the tutorial section, but before a tutorial makes sense, it has to work correctly and be comprehensible.

Now that I'm doing the whole thing in a real project, it seems pretty strange and arbitrary in terms of pixel spacing.

As I said, the menu is 120 pixels high and the padding of the first section is 60 pixels large. That's 180 pixels in sum, but I have to set an offset of +183 pixels in the bookmarks properties to position the section exactly below the menu.

To get the same orientation when coming from an external page, you have to specify an offset of -183 pixels in the corresponding HTML section.

The second section is directly below the first one and also has a top padding of 60 pixels. The second bookmark is directly between the first and the second section. But now I have to set -26 pixels as offset in the bookmarks properties to align the second section pixel exact under the menu.

In the HTML properties of the bookmark, I have to set an offset of +26 pixels to get the same alignment.

Thats all a bit confusing and incomprehensible.











Apart from the inverted signs, I cannot understand the different offsets.

Markus

[Markus]

I'm starting to find out more and more.
The values are now traceable and consistent (apart from 1 pixel difference).

I have to place the bookmarks as the first element within the respective LayoutGrid, then the offset values for the bookmark have to be calculated consistently (menu height = 120 pixels plus Top Padding of the LayoutGrid = 60 pixels). The only difference is that I don't have to enter the calculated 180 pixels as bookmark offset, but +179 pixels.



The following sections (LayoutGrids) are similar. Here I have to add the 120 pixels of the menu and the top padding of the LayoutGrid (20 pixels). That's 140 pixels, but I have to add +139 pixels to the bookmark. Great, that's consistent and comprehensible now. What remains are the reversed signs when extending the HTML object of the bookmark - here I have to enter minus 139 pixels. But as mentioned in another post, it is possible that the Offset property field for the bookmark generally assumes negative values.

Code: Select all

<style>
.offset139 a {
  position: relative;
  top: -139px;
  }
</style>

<div class="Offset139">

Markus

PS: Damn, I mixed up the threads. All my "Offset"-posts should be placed in this thread (sorry for the confusion):
*** SOLVED *** A link to the first element (anchor) does not set view fully to top